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内 容 简 介 


本 书 从 HTML. CSS, JavaScript 最 基本 的 概念 开始 ， 由 浅 至 深 地 介绍 这 三 种 语言 在 网 页 开发 中 的 应 
月 ， 并 挑选 了 网 页 开发 技术 中 最 精 藤 的 部 分 进行 讲解 ， 让 读者 能 够 更 高 效 地 掌握 网 页 开发 技术 。 

本 书 的 第 一 部 分 从 宏观 上 介绍 HTML. CSS. JavaScript 在 Web 开发 中 的 应 用 ; 第 二 部 分 着 重 介 绍 
HTML 语言 ， 分 析 其 搭建 网 页 框架 上 的 特点 ， 第 三 部 分 讲解 CSS 语言 如 何 控制 页 面 的 样式 和 风格 ; 第 四 
部 分 分 析 JavaScript 在 实现 网 页 动态 逻辑 方面 的 运用 ; 第 五 部 分 通过 综合 样 例 说 明 HTML, CSS, JavaScript 
在 实际 开发 中 的 各 类 运用 场景 。 

本 书 既 适合 作为 网 页 开发 的 入 门 教 程 和 工具 书 ， 也 适合 非 计算 机 专业 的 学 生 及 广大 计算 机 爱好 者 
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随 着 我 国 改革 开放 的 进一步 深化 ， 高 等 教育 也 得 到 了 快速 发 展 ， 各 地 高 校 紧 密 结合 
地 方 经 济 建设 发 展 需要 ， 科 学 运用 市 场 调节 机 制 ， 加 大 了 使 用 信息 科学 等 现代 科学 技术 
提升 、 改 造 传统 学 科 专业 的 投入 力度 ， 通 过 教育 改革 合理 调整 和 配置 了 教育 资源 ， 优 化 
了 传统 学 科 专 业 ， 积 极为 地 方 经 济 建设 输送 人 才 ， 为 我 国 经 济 社会 的 快速 、 健 康 和 可 持 
续 发 展 以 及 高 等 教育 自身 的 改革 发 展 做 出 了 巨大 贡献 。 但 是 ， 高 等 教育 质量 还 需要 进一步 
提高 以 适应 经 济 社会 发 展 的 需要 ， 不 少 高 校 的 专业 设置 和 结构 不 尽 合 理 ， 教 师 队伍 整体 
素质 踢 待 提高 ， 人 才 培 养 模式 、 教 学 内 容 和 方法 需要 进一步 转变 ， 学 生 的 实践 能 力 和 创 
新 精神 吸 待 加 强 。 

教育 部 一 直 十 分 重视 高 等 教育 质量 工作 。2007 年 1 月 ,教育 部 下 发 了 《关于 实施 高 等 
学 校本 科教 学 质量 与 教学 改革 工程 的 意见 》 计划 实施 “高 等 学 校本 科教 学 质量 与 教学 改革 
工程 (简称 “质量 工程 ')”， 通过 专业 结构 调整 、 课 程 教材 建设 、 实 践 教学 改革 、 教 学 团队 
建设 等 多 项 内 容 ， 进 一 步 深化 高 等 学 校 教 学 改革 ， 提 高 人 才 培 养 的 能 力 和 水 平 ， 更 好 地 满 
足 经 济 社会 发 展 对 高 素质 人 才 的 需要 。 在 贯彻 和 落实 教育 部 “质量 工程 ”的 过 程 中 ， 各 地 
高 校 发 挥 师资 力量 强 、 办 学 经 验 丰 富 、 教 学 资源 充裕 等 优势 , 对 其 特色 专业 及 特色 课程 ( 群 ) 
加 以 规划 、 整 理 和 总 结 ， 更 新 教学 内 容 、 改 革 课 程 体系 ， 建 设 了 一 大 批 内 容 新 、 体 系 新 、 
方法 新 、 手 段 新 的 特色 课程 。 在 此 基础 上 ， 经 教育 部 相关 教学 指导 委员 会 专家 的 指导 和 建 
议 ， 清 华 大 学 出 版 社 在 多 个 领域 精 选 各 高 校 的 特色 课程 ， 分 别 规划 出 版 系列 教材 ， 以 配合 
“质量 工程 ”的 实施 ， 满 足 各 高 校 教学 质量 和 教学 改革 的 需要 。 

本 系列 教材 立足 于 计算 机 公共 课程 领域 ， 以 公共 基础 课 为 主 、 专 业 基础 课 为 辅 ， 横 向 
满足 高 校 多 层次 教学 的 需要 。 在 规划 过 程 中 体现 了 如 下 一 些 基本 原则 和 特点 。 

(1) 面向 多 层次 、 多 学 科 专 业 ， 强 调 计 算 机 在 各 专业 中 的 应 用 。 教 材 内 容 坚 持 基 本 理 
论 适 度 ， 反 映 各 层次 对 基本 理论 和 原理 的 需求 ， 同 时 加 强 实践 和 应 用 环节 。 

(2) 反映 教学 需要 ， 促 进 教学 发 展 。 教 材 要 适应 多 样 化 的 教学 需要 ， 正 确 把 握 教学 内 
容 和 课程 体系 的 改革 方向 ， 在 选择 教材 内 容 和 编写 体系 时 注意 体现 素质 教育 、 创 新 能 力 与 
实践 能 力 的 培养 ， 为 学 生 的 知识 、 能 力 、 素 质 协 调 发 展 创造 条 件 。 

G) 实施 精品 战略 ， 突 出 重点 ， 保 证 质量 。 规 划 教 材 把 重点 放 在 公共 基础 课 和 专业 基 
础 课 的 教材 建设 上 ; 特别 注意 选择 并 安排 一 部 分 原来 基础 比较 好 的 优秀 教材 或 讲义 修订 再 
版 ， 逐 步 形成 精品 教材 ;提倡 并 鼓励 编写 体现 教学 质量 和 教学 改革 成 果 的 教材 。 

(4) 主张 一 纲 多 本 ， 合 理 配套 。 基 础 课 和 专业 基础 课 教材 配套 ， 同 一 门 课程 可 以 有 针 
对 不 同 层次 、 面 向 不 同 专业 的 多 本 具有 各 自 内 容 特点 的 教材 。 处 理 好 教材 统一 性 与 多 样 化 ， 
基本 教材 与 辅助 教材 、 教 学 参考 书 , 文字 教材 与 软件 教材 的 关系 ,实现 教 材 系 列 资源 配套 。 

(5) 依靠 专家 ， 择 优选 用 。 在 制定 教材 规划 时 依靠 各 课程 专家 在 调查 研究 本 课程 教材 
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建设 现状 的 基础 上 提出 规划 选 题 。 在 落实 主编 人 选 时 ， 要 引入 竞争 机 制 ， 通 过 申报 、 评 审 
确定 主题 。 书 稿 完成 后 要 认真 实行 审 稿 程 序 ， 确 保 出 书 质量 。 

繁荣 教材 出 版 事业 ， 提 高 教材 质量 的 关键 是 教师 。 建 立 一 支 高 水 平 教材 编写 梯队 才能 
保证 教材 的 编写 质量 和 建设 力度 ， 希 望 有 志 于 教材 建设 的 教师 能 够 加 入 到 我 们 的 编写 队伍 
中 来 。 
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随 着 信息 技术 的 发 展 ， 计 算 机 科学 逐步 融入 了 人 们 的 生活 ， 人 们 已 经 习惯 了 通过 各 类 
电子 设备 ， 如 手机 电脑 来 获取 需要 的 信息 ， 而 其 中 一 个 最 重要 的 途径 即 是 网 页 。HTML、 
CSS、JavaScript 作为 编写 网 页 的 基本 语言 ， 提 供 了 极 强 的 兼容 性 和 灵活 性 。 这 是 当前 跨 平 
台 信 息 传递 最 方便 、 最 灵活 的 一 项 技术 。 这 大 ,技术 也 是 网 页 技术 的 发 展 方向 。 在 信息 时 代 ， 
HTML, CSS, JavaScript 从 某 种 程度 上 决定 了 人 们 获取 信息 的 方式 ， 它 是 一 种 可 以 改变 世 
界 的 技术 。 

当下 无 论 是 电脑 还 是 移动 端 ， 都 装 有 浏览 器 ， 这 就 意味 着 几乎 所 有 的 用 户 端 口 都 能 接 
入 网 页 。 现 在 ， 常 见 的 社交 网 络 、 电 商 、 实 时 通信 技术 等 ， 都 与 网 页 技术 息息相关 ， 甚 至 
现代 编程 语言 的 发 展 也 深 受 HTML、CSS、JavaScript 语言 的 影响 。 可 以 说 ，HTML、CSS、 
JavaScript 是 当前 用 于 展示 信息 、 开 发 应 用 的 最 简单 高 效 的 一 种 技术 , 十 分 值得 推广 与 学 习 。 

我 们 阅读 了 市 面 上 大 量 HTML. CSS. JavaScript 的 书籍 ， 发 现 其 中 存在 一 些 缺 憾 与 不 
足 。 例 如 ， 使 用 规范 过 旧 ， 逐 渐 被 新 HTML5、CSS3 等 标准 淘汰 ;没有 提供 充足 的 样 例 ， 
过 多 的 概念 讲解 无 法 与 实际 结合 ; 个 别 内 容 没有 普遍 性 ， 不 能 较 好 地 引导 读者 掌握 学 习 
HTML, CSS, JavaScript 的 本 质 ， 不 能 真正 地 教会 读者 自主 解决 问题 的 能 力 。 

本 书 旨 在 让 读者 学 会 前 端 开发 的 通用 法 则 ， 而 不 是 仅仅 学 习 一 个 前 端 开发 工具 或 语 
言 ， 因 为 技术 的 发 展 令 任何 技术 都 面临 着 淘汰 的 风险 。 本 书 希 望 读者 不 仅仅 拘泥 于 技术 细 
节 的 学 习 ， 更 重要 的 是 用 心 感受 这 种 开发 模式 ， 感 受 工具 特点 ， 顺 应 语言 的 特质 ， 令 开发 
过 程 会 更 为 轻松 而 高 效 。 

本 书 基本 分 为 五 部 分 ， 第 一 部 分 讲解 前 端 开 发 的 一 些 基 本 背景 ， 让 读者 快速 了 解 
HTML, CSS, JavaScript 三 种 语言 的 特点 ， 同 时 了 解 它们 三 者 之 间 的 合作 关系 。 和 希望 读者 
通过 第 一 部 分 的 阅读 可 以 具有 基本 的 前 端 开 发 能 力 ， 之 后 可 以 自行 学 习 后 面 的 章节 或 自行 
查阅 资料 学 习 。 第 二 、 三 、 四 部 分 分 别针 对 HTML, CSS. JavaScript 展开 介绍 。 笔 者 挑选 
了 每 种 语言 工具 中 最 重要 、 最 实用 的 部 分 进行 讲解 ， 通 过 使 用 模板 、 规 范 代 码 、 讲 解 示 例 
等 形式 ， 多 方面 展示 这 三 种 语言 的 特性 及 功能 ， 并 将 其 与 实际 应 用 联系 ， 和 希望 读者 能 够 通 
过 学 习 进 一 步 深化 对 这 几 种 语言 的 理解 。 

所 有 实例 代码 都 可 以 从 https://pan.baidu.com/s/1 geNZoeZ 进行 下 载 。 

本 书 的 作者 是 吕 云 翔 、 欧 阳 植 吴 、 徐 硕 ， 而 曾 洪 立 、 吕 彼 佳 、 姜 彦 华 对 本 书 也 进行 了 

- 些 素材 整理 及 配套 资源 制作 等 工作 ， 在 此 对 他 们 表示 感谢 。 

由 于 我 们 的 水 平和 能 力 有 限 ， 书 中 难免 有 玻 漏 之 处 。 恳 请 各 位 同仁 和 广大 读者 给 予 批 

评 指正 , 也 希望 各 位 能 将 实践 过 程 中 的 经 验 和 心得 与 我 们 交流 (yunxianglu@hotmail.com). 
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第 一 部 分 “前 端 语言 介绍 


第 一 部 分 挑选 前 段 语言 中 HTML. CSS. JavaScript 这 三 种 语言 最 核心 的 一 些 知识 进行 
讲解 ， 并 对 三 种 语言 入 门 知识 进行 罗列 ， 让 读者 能 够 快速 地 上 手 前 端 开发 。 希 望 读者 在 完 
成 这 部 分 学 习 后 ， 能 够 理解 前 端 开发 的 基本 要 领 ， 后 期 再 根据 自己 的 开发 需求 以 及 兴趣 ， 
阅读 后 面 的 章节 。 

第 1 章 HTML. CSS. JavaScript 的 介绍 

$23 HTMLA 

$33 CSS 入门 

第 4 章 JavaScript 入 门 





第 1 章 | HTML, CSS, JavaScript 的 介绍 





HTML, CSS, JavaScript 是 Web 开发 中 必 将 涉及 的 三 种 技术 ， 它 们 是 将 网 页 按照 网 页 
内 容 、 外 观 样式 及 动态 效果 彻底 分 离 ， 从 而 大 大 地 减少 页 面 代码 ， 能 节省 带宽 、 提 升 用 户 
的 浏览 体验 ， 更 便于 分 工 设计 、 代 码 重 用 ， 既 易于 维护 ， 又 能 被 移植 到 以 后 更 新 升级 的 
Web 程序 中 ;同时 按照 Web 标准 能 够 轻松 地 制作 出 在 各 种 移动 设备 终端 中 访问 的 页 面 。 


1.1 准 备 


£3] HTML, CSS. JavaScript 只 需要 一 个 浏览 器 和 一 个 文本 编辑 器 即 可 。 例 如 Chrome, 

IE, it Safari 等 主流 浏览 器 和 记事 本 、sublime、Dreamweaver 等 用 于 撰写 代码 。 本 书 

使 用 macOS 下 的 Safari 浏览 器 和 Sublime 编辑 器 进行 编辑 。 具 体 步骤 如 下 所 述 。 
。 打开 文本 编辑 器 ， 新 建 HTML 文件 ， 并 输入 相应 代码 如 图 1-1 所 示 。 


1-1html 





1-Lhtml 


narset="utf-8" 
le»Sample HTML/CSS/JavaScript< 
<script> 
function H 
entById("demo") . innerHTML-Date() ; 


/css/davaScript Saole 
"This paragraph vi display the date</p 


es"button" onclicke"displayDate()"»Display date</button> 


background-color:#dde4fe; 





© Line 33, Column 35 


图 1-1 在 文本 编辑 器 中 输入 的 相应 代码 


€ 保存 ， 保 存 步骤 如 图 1-2 所 示 。 


€ sublime Text Sdecibe Find View Goto Toda Project Widow Heb ILI 
New File x - rinm 
Open.. xo 
Open Recent > 
Reopen wih Encoding 
seve As Rd 
Save wih Encoding 7 
Save As... egs: 
Save a 


Now Window B 
Cose Window 
D iCloud Driva 
Revert Fie k 
X Aopicaticns 
Coso Al Files 
Vf] Desktop. 


F Documents 


= Art Collections 


© vowniosce 


€— 


tive Clouc Fites 


iscivosh HO 1010 


IOOTCAMP 





图 1-2 ”保存 步骤 


e 在 浏览 器 中 运行 HTML 文件 ， 浏 览 器 运 和 





如 图 1-3 所 示 。 


. Me:ji/userarrac/Dest tonr Pe HTML /Code 1 hun č o ò a 


Sun Jun 04 2017 22:17:58 GMT+0800 (CST) 


图 1-3 浏览 器 运行 结果 


»-B 
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1.2 HTML, CSS, JavaScript 的 介绍 


现代 网 页 设计 最 准确 的 网 页 设计 思路 是 把 网 页 分 成 三 个 层次 : 结构 层 HTML), dé 
JÆ (CSS)、 行 为 屋 GavaScrip), HTML, CSS, JavaScript 简介 及 简单 分 工 如 下 所 述 。 
e HTML 即 超 文 本 标记 语言 (Hyper Text Markup Language), HTML 是 用 来 描述 网 页 
的 一 种 语言 。 
e CSS HEREC (Cascading Style Sheets)， 样 式 定义 如 何 显示 HTML 元 素 ， 语 法 
Jy: selector (property: value} (选择 符 {属性 : 值 })。 
e JavaScript 是 一 种 脚本 语言 ， 其 源 代码 在 发 往 客户 端 运行 之 前 不 需 经 过 编译 ， 而 是 
将 文本 格式 的 字符 代码 发 送 给 浏览 器 由 浏览 器 解释 运行 。 
对 于 一 个 网 页 ，HTML 定义 网 页 的 结构 ，CSS 描述 网 页 的 样式 ，JavaScript 设置 逻辑 
和 动态 效果 。 一 个 很 经 典 的 例子 是 说 HTML 就 像 一 个 人 的 骨骼 、 器 官 ， 而 CSS 就 是 人 的 
皮肤 ， 有 了 这 两 样 也 就 构成 了 一 个 人 的 肉体 了 ， 加 上 JavaScript 以 后 这 个 植物 人 就 可 以 对 
外 界 刺激 做 出 反应 ， 可 以 思考 、 运 动 、 给 自己 整容 化 妆 〈 改 变 CSS)， 等 等 ， 成 为 一 个 活 
生生 的 人 。 如 果 说 HTML 是 肉身 、CSS 就 是 皮肤 、JavaScript 就 是 灵魂 。 如 果 说 HTML 
是 建筑 师 ，CSS 就 是 干 装修 的 ，JavaScript 是 魔术 师 。 


13 HTML, CSS. JavaScript 之 间 的 协作 关系 


1. HTML 

HTML 是 Intemet 上 用 于 设计 网 页 的 基础 语言 。 网 页 包括 动画 、 多 媒体 、 图 形 等 各 种 
复杂 的 元 素 ， 其 基础 架构 都 是 HIML。 它 是 一 种 标记 语言 ， 只 能 建议 浏览 器 以 什么 方式 或 
结构 显示 网 页 内 容 ， 在 这 一 点 上 这 是 不 同 于 程序 设计 语言 的 。 

2. CSS 

HTML 可 以 标记 页 面 文档 中 的 段落 、 标 题 、 表 格 、 链 接 等 格式 。 但 随 着 网 络 的 发 展 ， 
用 户 需 求 的 不 断 增加 , 只 用 HTML 已 经 不 能 满足 更 多 的 文档 样式 需求 。 为 了 解决 这 一 问题 ， 
CSS 应 运 而 生 。 

CSS 又 称 层 合 样式 表 ， 是 一 种 制作 网 页 的 新 技术 。“ 层 全 ”是 指 当 在 HTML 中 引用 了 
数 个 样式 文件 ， 并且 样式 发 生 冲 突 时 ,浏览 器 能 依据 层 合 顺序 处 理 。“ 样 式 ” 指 网 页 中 文字 
大 小 、 颜 色 、 图 片 位 置 等 格式 。 

CSS 是 目前 唯一 的 网 页 页 面 排版 样式 标准 。 它 能 使 任何 浏览 器 都 听从 指令 ， 知 道 该 以 
何 种 布局 、 格 式 显示 各 种 元 素 及 其 内 容 。 

它 弥 补 了 HTML 对 网 页 格式 化 方面 的 不 足 ， 起 到 排版 定位 的 作用 。 

3. JavaScript 

HTML 45 CSS 配合 使 用 ， 提 供给 用 户 的 只 是 一 种 静态 的 信息 ， 缺 少 交 互 性 。 用 户 已 不 
满足 于 仅仅 只 是 浏览 单调 化 的 信息 ， 如 果 网 页 中 有 更 多 的 交互 性 和 动态 效果 ， 则 会 大 大 优 
化 用 户 的 感官 视觉 体验 。 




















出 于 这 样 的 一 种 需求 ，JavaScript 应 运 而 生 。JavaScript 是 一 种 脚本 语言 ， 它 的 出 现 使 
得 用 户 与 信息 之 间 不 只 是 一 种 浏览 与 显示 的 关系 ， 而 是 实现 了 一 种 实时 、 动 态 、 交 互 的 页 
面 功能 ， 比 如 下 载 时 的 进度 条 、 提 示 框 等 。 

JavaScript 用 于 开发 Intemet 客户 端的 应 用 程序 ， 可 以 结合 HIML、CSS， 实 现在 一 个 
Web 页 面 中 与 Web 客户 交互 的 功能 。 

4. 总 结 

HTML 是 网 页 的 基础 ，CSS 是 元 素 格 式 、 页 面 布局 的 灵魂 ， 而 JavaScript 是 实现 网 页 
的 动态 性 、 交 互 性 的 点 睛 之 笔 。 



































14 HTML, CSS, JavaScript 的 学 习 建 议 


推荐 使 用 http://www.w3school.com.cn 和 http://www.runoob.com 等 在 线 网 站 , 来 学 习 基 
本 的 语法 。 许 多 HIML、CSS、JavaScript 的 代码 是 不 需要 重复 编写 的 ， 可 以 通过 多 利用 开 
源 平台 诸如 GitHub 的 开源 代码 以 及 网 上 丰富 的 各 类 模板 来 加 快 开发 进度 。 


15 HTML, CSS. JavaScript 样 例 


1.5.1 综合 样 例 


为 了 大 致 地 了 解 HTML, CSS, JavaScript 这 三 种 语言 在 前 端 开发 中 的 角色 ， 笔 者 直接 
展示 一 段 使 用 了 三 种 语言 的 代码 作为 示例 ， 见 代码 1-1。 
代码 1-1 


<!DOCTYPE html> 
<html> 


<head> 
<meta charset="utf-8"> 
<title>Sample HTML/CSS/JavaScript</title> 
<script> 
function displayDate() { 
document .getElementById ("demo") .innerHTML = Date(); 
} 


</script> 
</head> 
<body> 
<h1>HTML/CSS/JavaScript Sample</h1> 第 
<p id="demo">This paragraph will display the date</p> 1 
* 
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<button type="button" onclick="displayDate()">Display date</button> 


</body> 
<style> 
body { 
background-color: #d0e4fe; 
) 
hi 1 
color: orange; 
text-align: center; 
) 
pt 
font-family: "Times New Roman"; 
font-size: 20px; 
) 
«/style» 
</html> 


代码 中 ，<html> 标 签 内 包含 了 众多 HTML 元 素 ， 是 网 页 的 框架 ，<style> 标 签 里 则 是 
CSS 代码 ， 可 控制 着 页 面 的 元 素 属性 ，<scrip 亿 标签 中 包含 了 JavaScript 代码 ， 实 现 了 显示 
日 期 的 功能 逻辑 ， 效 果 如 图 1-4 和 图 1-5 所 示 。 





图 1-4 日 期 显示 运行 效果 





图 1-5 日 期 显示 单 击 效果 


HTML, CSS, JavaScript 这 三 种 语言 在 前 端 开发 中 分 别 担任 着 三 种 特点 分 明 的 角色 。 
HTML 是 网 页 结构 的 骨架 ， 具 有 网 页 元 素 的 基本 显示 功能 ;CSS 则 可 以 控制 丰富 的 网 页 元 
素 效果 ; JavaScript 控制 网 页 的 运算 和 逻辑 。 


1.55.2 HTML #41! 


HTML 是 由 一 个 个 诸如 <> 的 标签 构成 的 ，<> 和 < 人 > 构成 一 个 元 素 ， 例 如 代码 1-2 中 各 
个 元 素 的 意义 如 下 : 


<!DOCTYPE html> 声 明 为 HTMLS 文档 ; 
<html> 元 素 是 HTML 页 面 的 根 元 素 ; 
<head> 元 素 包 含 了 文档 的 元 (meta) 数据 ; 
<title> 元 素描 述 了 文档 的 标题 ; 

<body> 元 素 包 含 了 可 见 的 页 面 内 容 ; 

<h1> 元 素 定义 一 个 大 标题 ; 

<p> 元 素 定义 一 个 段落 。 


代码 1-2 


<!DOCTYPE html» 
<html> 
<head> 


<meta charset-"utf-8"» 


<title>Title</title> 
</head> 第 
<body> 1 
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<hl>The first title</hl> 
<p>The first paragraph</p> 
</body> 
</html> 
很 多 时 候 ， 我 们 并 不 需要 关注 诸如 <!IDOCTYPE html> 这 样 的 标签 ， 因 为 浏览 器 会 默认 
设置 好 这 些 参数 ， 例 如 下 面 的 代码 1-3 也 会 和 代码 1-2 显示 一 样 的 内 容 。 
代码 1-3 
<head> 
<title>Title</title> 


</head> 
<body> 


<hl>The first title«/hl» 


<p>The first paragraph</p> 
代码 1-2 和 代码 1-3 的 执行 结果 如 图 1-6 所 示 。 


The first title 


The first paragraph 








图 1-6 HTML 运行 效果 


15.3 CSS 样 例 
代码 1-4 


<body style="background-color: yellow; "> 

<h2 style="background-color: red; "> 这 是 一 个 标题 </h2> 
<p style-"background-color:green; "> 这 是 一 个 段落 。</P> 
</body> 


可 以 发 现 ，CSS 的 定义 在 style 字段 中 ， 可 以 设置 相关 元 素 的 样式 。 在 代码 1-4 中 的 
HTML 中 我 们 使 用 了 内 联 CSS 样式 来 展示 颜色 背景 效果 ，CSS 运行 效果 如 图 1-7 所 示 。 

这 是 一 个 最 为 简单 的 CSS 例子 ， 在 后 面 的 介绍 中 会 逐步 系统 地 介绍 CSS 的 三 种 使 
形式 : 内 联 样式 、 内 部 样式 表 和 外 部 引用 。 

















a 


eoe m 


图 1-7 CSS 运行 效果 


1.5.4 JavaScript 样 例 
代码 1-5 


<script> 
alert ("Hello JavaScript!'); 
</script> 


代码 1-5 使 用 JavaScript 提供 的 alert 函数 输出 了 一 段 'Hello JavaScript!' 的 弹 窗 ， 
JavaScript 运行 效果 如 图 1-8 所 示 。JavaScript 可 以 实现 各 种 控制 功能 ，JavaScript 可 以 像 传 
统 的 编程 语言 一 样 ， 使 用 各 类 函数 变量 等 功能 ， 这 些 功 能 十 分 强大 。 


Hello JavaScript! 
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图 1-8 JavaScript 运行 效果 
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1. %3 HTML, CSS, JavaScript 的 使 用 ， 通 常 要 准备 哪些 工具 ? 

2. HTML <!DOCTYPE html>、<html>、<head>、<title>、<body>、<hl>、<p> 标 签 
的 基本 含义 是 什么 ? 

3. 现代 网 页 设计 思路 经 常 是 将 网 页 分 成 哪 三 个 层次 ? 

4. 简单 概括 HTML, CSS, JavaScript 的 特点 。 

5. CSS 有 几 种 使 用 形式 ? 它们 分 别 是 哪 几 种 ? 
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2.1 HTML 背景 及 特点 





首先 , 为 了 进一步 地 了 解 HTML, 我 们 带 读者 简单 地 看 一 下 HTML 的 发 展 背 景 以 及 它 
的 特点 。HTML 的 语法 如 图 2-1 所 示 。 





<html> 









































TCH : TCR : | 

<head> <body> 

JUR: 属性 : 元 素 : TH: 

<title> href ii ii 1> 

文本 : 文本 : 文本 : 
“文档 标题 ” “我 的 链接 ” “我 的 标题 ” 





图 2-1 HTML 语法 


2.1.1 HTML 背景 


HTML 作为 定义 万 维 网 的 基本 规则 之 一 ， 最 初 由 带 姆 。 本 尼斯 李 (Tim Berners-Lee) 
于 1989 年 在 CERN (Conseil Europeen pour la Recherche Nucleaire) 研制 出 来 。 独 立 于 平台 ， 
独立 于 计算 机 硬件 和 操作 系统 。 这 个 特性 对 各 种 平台 和 设备 以 及 推广 HTML 技术 是 至 关 
重要 的 ， 因 为 在 这 个 特性 中 ， 文 档 可 以 在 具有 不 同性 能 〈 即 字体 、 图 形 和 颜色 差异 ) 的 计 
算 机 上 以 相似 的 形式 来 显示 文档 内 容 。 
2.1.2 HTML # 4 


HIML 是 一 种 用 来 描述 网 页 的 语言 。 

* HTML 指 的 是 超 文本 标记 语言 (Hyper Text Markup Language); 

* HTML 不 是 一 种 编程 语言 ， 而 是 一 种 标记 语言 (markup language); 
。 标记 语言 是 一 套 标 记 标签 (markup tag): 

* HTML 使 用 标记 标签 来 描述 网 页 。 


ym 
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2.2 HTML 开发 环境 


HTML 的 开发 十 分 方便 ， 只 要 任意 一 个 主流 的 浏览 器 和 一 个 文字 编辑 器 即 可 。 可 以 使 
用 专业 的 HTML 编辑 器 如 Dreamweaver， 还 有 三 款 常 用 的 编辑 器 如 下 所 述 。 

e Notepad++: https://notepad-plus-plus.org/. 

e Sublime Text: http://www.sublimetext.com/. 

e HBuilder: http://www.dcloud.io/. 

可 以 从 以 上 软件 的 官网 中 下 载 对 应 的 软件 ， 按 步骤 安装 即 可 ，Dreamweaver 界面 如 
图 2-2 所 示 。 





图 2-2 Dreamweaver 界面 


Safari 浏览 器 和 Sublime 编辑 器 界面 如 图 2-3 所 示 。 





页 面 


2.3 HTML 快速 入 门 





HTML 最 重要 的 两 个 要 素 是 元 素 和 属性 。 了 解 这 两 个 概念 后 即 可 编写 简单 的 HTML 


1. 元素 
Tft HTML 的 第 一 步 就 是 了 解 什么 是 HTML 元 素 和 属性 。HTML 元 素 指 的 是 从 开始 


PRE (start tag) 到 结束 标签 (end tag) 的 所 有 代码 ， 如 表 2-1 所 示 。 
表 2-1 HTML 元 素 
开始 标签 元 素 内 容 结束 标签 
<head> Title </head> 
<p> This is a paragraph </p> 
<pl> This another paragraph </p1> 


MY HTML 文档 中 的 一 个 段落 。 这 个 元 素 拥 有 一 个 开始 标签 <p>， 以 及 一 个 结束 标 多 


</p> 


标签 ， 


下 面 的 代码 包含 了 三 个 HTML 元 素 ， 分 别 是 <html>，<body>，<p>。 例 如 <p> 元 素 定 





。 元 素 内 容 是 : This is my first paragraph. 


<html> 
<body> 
<p>This is my first paragraph.</p> 
</body> 
</html> 


可 以 根据 需要 查阅 相关 的 HTML 元 素 的 使 用 方法 ， 例 如 需要 插入 图 片 则 加 入 <image> 
需要 插入 视频 则 加 入 <video> 标 签 ， 其 他 更 多 标签 可 以 利用 搜索 引擎 进行 学 习 。 

2. 属性 

HTML 标签 可 以 拥有 属性 。 属 性 提供 了 有 关 HTML 元 素 的 更 多 的 信息 。 属 性 总 是 以 





名 称 / 值 对 的 形式 出 现 ， 比 如 : name="value"。 属 性 总 是 在 HTML 元 素 的 开始 标签 中 规定 。 


HTML 链接 由 <a> 标签 定义 , 链接 的 地 址 在 bref 属性 中 指定 。 例 如 下 面 的 代码 会 跳 


转 到 http://www.baidu.com. 


<a href="http://www.baidu.com">This is a link</a> 
表 2-2 列 出 了 适用 于 大 多 数 HTML 元 素 的 属性 。 
表 2-2 HTML 元 素 的 属性 








属性 描述 

class 为 HTML 元 素 定义 一 个 或 多 个 类 名 (classname) (类 名 从 样式 文件 引入 ) 

id 定义 元 素 的 唯一 

style 规定 元 素 的 行内 样式 (inline style) 第 

title 描述 了 元 素 的 额外 信息 〈 作 为 工具 条 使 用 ) 
章 
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1. #3 HTML, CSS, JavaScript 的 使 用 通常 要 准备 哪些 工具 ? 
2. 简单 概括 HTML 的 诞生 背景 及 其 特点 。 
3. HTML 最 简单 的 开发 环境 是 A 
A. Windows+ 正 浏览 器 
B. 任何 浏览 器 + 文本 编辑 器 
C. 手机 + 浏览 器 
D. Dreamweaver + IE 浏览 器 
4. 什么 是 HTML 元 素 ? 什么 是 元 素 的 属性 ? 
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31 CSS 背景 及 特点 


CSS FRA FEES (Cascading Style Sheets), 它 是 继 HTML 语言 之 后 诞生 的 前 端 样式 
语言 。 起 初 ，HTML 因为 控制 的 样式 字体 等 前 端 文 字样 式 过 于 繁琐 复杂 ， 从 而 造成 它 的 可 
维护 性 极 低 。 为 了 解决 这 个 问题 ，CSS 诞生 了 。 


311 CSS 背景 


HTML 标签 原本 是 用 于 定义 文档 内 容 。 起 初 ， 通 过 使 用 <hl>、<p>、<table> 这 样 的 
标签 ，HTML 表达 了 “这 是 标题 ”““ 这 是 段落 ”“ 这 是 表格 ”之 类 的 信息 。 同 时 文档 布局 是 
由 浏览 器 来 完成 ， 而 不 使 用 任何 的 格式 化 标签 。 

由 于 两 种 主要 的 浏览 器 (Netscape 和 Internet Explorer) 不 断 地 将 新 的 HTML 标签 和 
属性 《比如 字体 标签 和 颜色 属性 ) 添加 到 HTML 规范 中 ， 使 得 创建 文档 内 容 可 以 清晰 地 
独立 于 文档 表现 层 的 站 点 变 得 越 来 越 困 难 。 

为 了 解决 这 个 问题 , 万 维 网 联盟 CW3C), 这 个 非 营利 的 标准 化 联盟 , 肩负 起 了 HTML 
标准 化 的 使 命 ， 并 在 HTML 4.0 之 外 创造 出 样式 (style)。 目 前 所 有 的 主流 浏览 器 均 支 持 
层 车 样式 表 。 


3.1.0 CSS 特点 


CSS 是 优化 HTML 显示 ， 让 文档 内 容 清晰 地 独立 于 文档 表现 层 的 重要 技术 : 
e CSS 定义 如 何 显示 HTML 元素; 

© CSS 通常 存储 在 样式 表 中 ; 

e 把 CSS 添加 到 HTML 4.0 中 ， 是 为 了 解决 内 容 与 表现 分 离 的 问题 ; 

e 外 部 CSS 可 以 极 大 提高 工作 效率 ; 

。 外 部 CSS 通常 存储 在 CSS 文件 中 ; 

e 多 个 CSS ENTERI JH. 


3.1.3 CSS 开发 环境 




















CSS 可 以 和 HIML 使 用 完全 一 样 的 开发 环境 。 
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32 CSS 快速 入 门 


3.2.1 CSS 基本 语法 
CSS 规则 是 由 两 个 主要 的 部 分 构成 : 选择 器 ， 以 及 一 条 或 多 条 声明 。 





selector {declarationl; declaration2; …; declarationN} 

选择 器 通常 是 需要 改变 样式 的 HTML 元 素 。 每 条 声明 由 一 个 属性 和 一 个 值 组 成 。 属 
性 (property) 是 希望 设置 的 样式 属性 (style attribute )。 每 个 属性 有 一 个 值 。 属 性 和 值 被 冒 
号 分 开 。 

selector {property: value} 

本 书 中 像素 以 px 表示 。 下 面 这 行 代码 的 作用 是 将 hl 元 素 内 的 文字 颜色 定义 为 红色 ， 
同时 将 字体 大 小 设置 为 14px。 在 这 个 例子 中 ，hl 是 选择 器 ，color 和 font-size 是 属性 ,red 
和 14px 是 值 。 

hl {color:red; font-size:14px;} 

上 面 这 段 CSS 代码 的 结构 如 图 3-1 所 示 。 

属性 值 属性 值 
r- --H--4----- }----}---, 


! hi | {color:red; font-size: 14px; ) | 1 


pe 


选择 器 声明 声明 





图 3-1 CSS 代码 的 结构 

。 值 的 不 同 写法 和 单位 

除了 英文 单词 red， 我 们 还 可 以 使 用 十 六 进 制 的 颜色 值 #ff0000: 

p { color: £$ff0000; } 

为 了 节约 字 节 ， 我 们 可 以 使 用 CSS 的 缩写 形式 : 

p { color: #f£00; } 

我 们 还 可 以 通过 两 种 方法 使 用 RGB fü: 

p { color: rgb(255,0,0); } 

p { color: rgb(100%,0%,0%); } 

请 注意 ， 当 使 用 RGB 百分比 时 ， 即 使 当 值 为 0 时 也 要 写 百分比 符号 ， 但 是 在 其 他 
的 情况 下 就 不 需要 这 么 做 了 。 比 如 说 ， 当 尺寸 为 0 像素 时 ，0 之 后 不 需要 使 用 px 单位 ， 








因为 0 就 是 0， 无 论 单位 是 什么 。 如 果 值 为 若干 单词 ， 则 要 给 值 加 引号 。 











p {font-family: "sans serif";} 


。 多 重 声明 

如 果 要 定义 不 止 一 个 声明 ， 则 需要 用 分 号 将 每 个 声明 分 开 。 下 面 的 例子 展示 了 如 何 定 
义 一 个 红色 文字 的 居中 段落 。 最 后 一 条 规则 是 不 需要 加 分 号 的 ， 因 为 分 号 在 英语 中 是 一 个 
分 隔 符号 ， 不 是 结束 符号 。 然 而 , 大 多 数 有 经 验 的 设计 师 会 在 每 条 声明 的 末尾 都 加 上 分 号 。 
这 么 做 的 好 处 是 ， 当 从 现 有 的 规则 中 增 减 声明 时 ， 会 尽 可 能 地 减少 出 错 的 可 能 性 。 就 像 
这 样 : 


p {text-align:center; color:red;} 
你 应 该 在 每 行 只 描述 一 个 属性 ， 这 样 可 以 增强 样式 定义 的 可 读 性 ， 就 像 这 样 : 


pi 
text-align: center; 
color: black; 
font-family: arial; 
} 
。 空格 和 大 小 写 
大 多 数 样式 表 包 含 不 止 一 条 规则 ， 而 大 多 数 规则 包含 不 止 一 个 声明 。 多 重 声明 和 空格 
的 使 用 使 得 样式 表 更 容易 被 编辑 。 
body { 
color: #000; 
background: #fff; 
margin: 0; 
padding: 0; 
font-family: Georgia, Palatino, serif; 
} 


是 否 包 含 空格 不 会 影响 CSS 在 浏览 器 的 工作 效果 , 同样 , 与 XHTML 不 同 , CSS 对 
大 小 写 不 敏感 。 不 过 存在 一 个 例外 : 如 果 涉 及 与 HTML 文档 一 起 工作 的 话 , class 和 id 名 
称 对 大 小 写 是 敏感 的 。 


3.2.2 ”如 何 插入 样式 表 


当 读 到 一 个 样式 表 时 ,浏览 器 会 根据 它 来 格式 化 HTML 文档 。 插 入 样式 表 的 方法 有 三 
种 ， 最 后 会 说 明 三 种 CSS 的 优先 级 关系 。 

1. 外 部 样式 表 

当 样 式 需 要 应 用 于 很 多 页 面 时 ， 外 部 样式 表 将 是 理想 的 选择 。 在 使 用 外 部 样式 表 的 情 
况 下 ， 你 可 以 通过 改变 一 个 文件 来 改变 整个 站 点 的 外 观 。 每 个 页 面 使 用 <link> 标签 链接 | 3 
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到 样式 表 。<link> 标签 在 (文档 的 ) 头 部 ， 如 代码 3-1 所 示 。 
代码 3-1 


<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
</head> 


浏览 器 会 从 文件 mystyle.css 中 读 到 样式 声明 ， 并 根据 它 来 格式 文档 。 外 部 样式 表 可 
以 在 任何 文本 编辑 器 中 进行 编辑 ,文件 不 能 包含 任何 的 HTML 标签 。 样 式 表 应 该 以 .css H 
展 名 进行 保存 。 下 面 是 一 个 样式 表 文 件 的 例子 。 


hr (color: sienna; } 
p {margin-left: 20px;} 
body {background-image: url ("images/back40.gif") ;} 


不 要 在 属性 值 与 单位 之 间 留 有 空格 。 否 则 ， 如 果 你 使 用 “margin-left 20 px” 而 不 是 
“margin-left: 20px”， 则 可 能 会 无 法 正常 显示 。 

2. 内 部 样式 表 

当 单 个 文档 需要 特殊 的 样式 时 ， 就 应 该 使 用 内 部 样式 表 。 你 可 以 使 用 <style> 标签 在 
文档 头 部 定义 内 部 样式 表 ， 就 像 如 下 代码 这 样 : 

<head> 


<style type="text/css"> 
hr {color: sienna;} 





p {margin-left: 20px;} 

body {background-image: url("images/back40.gif");} 
</style> 
</head> 


3. 内 联 样式 

如 果 要 将 表现 和 内 容 混 杂 在 一 起 ， 则 内 联 样式 会 损失 掉 样 式 表 的 许多 优势 。 请 慎 用 这 
种 方法 ， 例 如 当 样 式 仅 需 要 在 一 个 元 素 上 应 用 一 次 时 。 

要 使 用 内 联 样式 ， 你 需要 在 相关 的 标签 内 使 用 样式 〈style) 属性 。style 属性 可 以 包含 
任何 CSS 属性 。 本 例 展示 的 是 如 何 改 变 段落 的 颜色 和 左 外 边 距 。 


<p style="color: sienna; margin-left: 20px"» 
This is a paragraph 
</p> 


4. 多 重 样式 
如 果 某 些 属性 在 不 同 的 样式 表 中 被 同样 的 选择 器 定义 ， 那 么 属性 值 将 从 更 具体 的 样式 
例如 ， 外 部 样式 表 拥 有 针对 h3 选择 器 的 三 个 属性 。 


h3 { 
color: red; 


text-align: left; 
font-size: 8pt; 
} 


而 内 部 样式 表 拥 有 针对 h3 选择 器 的 两 个 属性 。 


h3 { 
text-align: right; 
font-size: 20pt; 
} 
假如 拥有 内 部 样式 表 的 这 个 页 面 同时 又 与 外 部 样式 表 链 接 ， 那 么 h3 得 到 的 样式 是 : 


color: red; 

text-align: right; 

font-size: 20pt; 

即 颜色 属性 将 被 继承 于 外 部 样式 表 , 而 文字 排列 (text-alignment) 和 字体 尺寸 (font-size) 
会 被 内 部 样式 表 中 的 规则 取代 。 


l. 请 简 述 CSS 规则 主要 是 由 哪 两 个 部 分 构成 的 。 
2. 简要 说 明 CSS 的 三 种 样式 的 特点 及 其 使 用 方式 。 


第 
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41 JavaScript 的 背景 及 特点 


4.1.1 JavaScript 的 背景 


Java 最 初 是 由 Netscape 的 Brendan Eich Wit. JavaScript 是 甲骨 文公 司 的 注册 商标 。 
Ecma 国际 以 JavaScript 为 基础 制定 了 ECMAScript 标准 。JavaScript 也 可 以 用 于 其 他 场合 ， 
如 服务 器 端 编程 。 完 整 的 JavaScript 实现 包含 三 个 部 分 : ECMAScript， 文 档 对 象 模型 ， 浏 
览 器 对 象 模 型 。 


4.1.2 JavaScript 的 特点 


1. 一 种 解释 性 执行 的 脚本 语言 

同 其 他 脚本 语言 一 样 ，JavaScript 也 是 一 种 解释 性 语言 , 它 提供 了 一 个 非常 方便 的 开发 
过 程 。JavaScript 的 语法 基本 结构 形式 与 C、C++、Java 十 分 类 似 。 但 在 使 用 前 ， 不 像 这 些 
语言 需要 先 编译 ， 而 是 在 程序 运行 过 程 中 被 逐 行 地 解释 。JavaScript 与 HTML 标识 结合 在 

-起 ， 从 而 方便 用 户 的 使 用 操作 。 

2. 一 种 基于 对 象 的 脚本 语言 

它 也 可 以 被 看 作 是 一 种 面向 对 象 的 语言 ， 这 意味 着 JavaScript 可 以 运用 其 已 经 创建 的 
对 象 。 因 此 ， 许 多 功能 可 以 来 自 于 脚本 环境 中 对 象 的 方法 与 脚本 的 相互 作用 。 

3. 一 种 简单 弱 类 型 脚本 语言 

其 简单 性 主要 体现 在 : 首先 ，JavaScript 是 一 种 基于 Java 基本 语句 和 控制 流 之 上 的 简 
单 而 紧凑 的 设计 , 从 而 对 于 使 用 者 学 习 Java 或 其 他 C 语 系 的 编程 语言 是 一 种 非常 好 的 过 渡 ， 
而 对 于 具有 C 语系 编程 功底 的 程序 员 来 说 ，JavaScript 上 手 也 非常 容易 ， 其 次 ， 其 变量 类 
型 是 采用 弱 类 型 ， 而 并 未 使 用 严格 的 数据 类 型 。 

4. 一 种 相对 安全 脚本 语言 

JavaScript 作为 一 种 安全 性 语言 , 是 不 被 允许 访问 本 地 的 硬盘 ， 且 不 能 将 数据 存 入 服务 
器 ， 不 允许 对 网 络 文 档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 从 而 
有 效 地 防止 数据 的 丢失 或 对 系统 的 非法 访问 。 

5. 一 种 事件 驱动 脚本 语言 

JavaScript 对 用 户 的 响应 ， 是 以 事件 驱动 的 方式 进行 的 。 在 网 页 (Web Page) 中 执行 了 
某 种 操作 所 产生 的 动作 ， 被 称 为 “事件 ”(Event)。 例 如 按 下 鼠标 、 移 动 窗口 、 选 择 菜单 等 



































都 可 以 被 视 为 事件 。 当 事件 发 生 后 ， 可 能 会 引起 相应 的 事件 响应 ， 执 行 某 些 对 应 的 脚本 ， 
这 种 机 制 被 称 为 “事件 驱动 ”。 

6. 一 种 跨 平台 性 脚本 语言 

JavaScript 依赖 于 浏览 器 本 身 ， 与 操作 环境 无 关 ， 只 要 计算 机 能 运行 浏览 器 ， 并 支持 
JavaScript 的 浏览 器 ， 就 可 正确 地 执行 ， 从 而 实现 了 “编写 一 次 ， 走 遍 天 下 ”的 梦想 。 


42 JavaScript 开发 环境 
JavaScript 可 以 使 用 浏览 器 和 一 个 文本 编辑 器 进行 开发 , 推荐 使 用 带 有 调试 功能 的 浏览 
器 如 Chrome 和 Safari 等 ， 包 含 调试 功能 的 浏览 器 (Safan〉 如 图 4-1 所 示 。 
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图 4-1 包含 调试 功能 的 浏览 器 《Safari 
43 JavaScript 快速 入 门 


43.1 JavaScript 基本 语法 


JavaScript 的 语法 借鉴 了 常见 的 Java, C 和 Perl 这 些 语言 的 规则 。 

1. 区 分 大 小 写 

与 Java 一 样 ， 变 量 、 函 数 名 、 运 算 符 以 及 其 他 一 切 东 西 都 是 区 分 大 小 写 的 。 比 如 : 
变量 test 与 变量 TEST 是 不 同 的 。 

2. 变量 是 弱 类 型 的 

Lj Java 和 C 不同, ECMAScript 中 的 变量 无 特定 的 类 型 , 定义 变量 时 只 用 var 运算 符 ， 
可 以 将 它 初始 化 为 任意 值 。 因 此 ， 可 以 随时 改变 变量 所 存 数据 的 类 型 (尽量 避免 这 样 做 )。 
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var color = "red"; 
var num = 25; 


var visible = true; 


3. 每 行 结尾 的 分 号 可 有 可 无 

Java, C 和 Perl 都 要 求 每 行 代码 以 分 号 CO. 结束 才 符 合 语法 。 

JavaScript 则 允许 开发 者 自行 决定 是 否 以 分 号 结束 一 行 代码 。 如 果 没 有 分 号 , JavaScript 
就 把 折 行 代码 的 结尾 看 作 该 语句 的 结尾 ， 但 前 提 是 这 样 没有 破坏 代码 的 语义 。 

最 好 的 代码 编写 习惯 是 总 加 入 分 号 , 因为 如 果 没 有 分 号 , 有 些 浏览 器 就 不 能 正确 运行 ， 
不 过 根据 JavaScript 标准 ， 下 面 两 行 代码 都 是 正确 的 。 


var testl "red"; 


"blue"; 


var test2 


4. 注释 与 Java、C 和 PHP 语言 的 注释 相同 

JavaScript 借用 了 这 些 语言 的 注释 语法 。 有 两 种 类 型 的 注释 : 

e 单行 注释 以 双 斜 本 开头 ODs 

。 多 行 注 释 以 单 斜 杠 和 星 号 开头 (/*)， 以 星 号 和 单 斜 杠 结尾 (*/)。 





//this is a single-line comment 


/*this is a multi- 
line comment*/ 


5. 括号 表示 代码 块 
从 Java 中 借鉴 的 另 一 个 概念 是 代码 块 。 代 码 块 表 示 一 系列 应 该 按 顺 序 执行 的 语句 ， 
这 些 语句 被 封装 在 左 括号 “{” 和 右 括号 “}” 之 间 。 
if (testl == "red") { 
testl = "blue"; 


alert (test1); 
} 


4.3.2 JavaScript 函数 


1. JavaScript 函数 语法 

函数 就 是 包 囊 在 花 括 号 中 的 代码 块 ， 并 在 前 面 使 用 了 关键 词 function. 
function functionName () 

{ 

//Code 

} 


当 调 用 该 函数 时 ， 会 执行 函数 内 的 代码 。 可 以 在 某 事件 发 生 时 直接 调用 函数 〈 比 如 当 
用 户 单 击 按钮 时 )， 并 且 可 由 JavaScript 在 任何 位 置 进行 调用 。 





2. 调用 带 参 数 的 函数 

在 调用 函数 时 ， 我 们 可 以 向 其 传递 值 ， 这 些 值 被 称 为 参数 。 这 些 参 数 可 以 在 函数 中 使 
用 。 同 时 向 函数 可 以 发 送 任意 多 的 参数 ， 由 有 逗号 “,” 分 隔 。 

myFunction (argument1, argument2) 


当 您 声明 函数 时 ， 请 把 参数 作为 变量 来 声明 : 


function myFunction(varl,var2) 


{ 

这 里 是 要 执行 的 代码 

) 

变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 是 第 一 个 被 传递 的 参数 的 给 定 的 
值 ， 以 此 类 推 。 

3. 带 有 返回 值 的 函数 

有 了 时， 我 们 会 希望 函数 将 值 返回 调用 它 的 地 方 。 通 过 使 用 return 语句 就 可 以 实现 。 在 
使 用 retum 语句 时 ， 函 数 会 停止 执行 ， 并 返回 指定 的 值 。 下 面 的 函数 会 返回 值 5。 





function myFunction () 
{ 

var x=5; 

return x; 
} 


4. 函数 使 用 
代码 4-1 展示 了 JavaScript 函数 的 使 用 以 及 一 些 基 本 的 JavaScript 变量 的 使 用 。 
代码 4-1 


<!DOCTYPE html» 
<html> 
<body> 
«hl»Headl«/hl» 


<p>The first paragraph.</p> 


<button onclick="myFunction()">Click Function</button> 


<script> 

var x = 1; 

var str = "stringInfo"; 
war arr = ["c*,"b", "a" le 


function myFunction () 
{ 第 


str += x; 4 
章 
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for (var i = arr.length - 1; i >= 0; i--) { 
str += arr[i]; 
} 
document.write (str); 
console.log ("Console:"+ str); 
} 
</script> 


</body> 
</html> 


代码 4-1 rP, JavaScript 代码 在 <scrip 亿 标签 内 。 首 先 声明 了 三 个 变量 。x，str，arr 三 个 
变量 会 被 JavaScript 自动 地 识别 为 整数 类 型 ， 字 符 串 类 型 和 字符 数组 类 型 。 


var x = 1; 
var str = "stringInfo"; 
var arr = ['c','b','a"]; 


JavaScript 函数 需要 加 入 function 关键 字 。 

function myFunction() 

document 是 一 个 全 局 函数 ， 调 用 其 write 方法 可 以 输出 内 容 到 HTML 页 面 上 。 
document.write (str); 


最 后 执行 了 Console.log 函数 ， 将 结果 输出 到 控制 台 上 ， 这 是 调试 中 常用 的 技巧 ， 如 同 
C 语言 中 的 printf 函数 。 控 制 台 和 页 面 执行 结果 如 图 4-2 所 示 。 
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图 4-2 控制 台 和 页 面 执行 结果 


43.3 JavaScript 对 象 


JavaScript 对 象 是 拥有 属性 和 方法 的 数据 。 例 如 真实 生活 中 ， 一 辆 汽车 是 一 个 对 象 。 
对 象 有 它 的 属性 ， 如 重量 和 颜色 等 ， 方 法 有 启动 停止 等 ， 如 表 4-1 所 示 。 


表 4-1 JavaScript 对 象 











属性 方法 
car.name = Fiat car.start() 
car.model = 500 car.drive() 
car.weight = 850kg car.brake() 
car.color = white car.stop() 


所 有 汽车 都 有 这 些 属性 ， 但 是 每 款 车 的 属性 都 不 尽 相 同 。 所 有 汽车 都 拥有 这 些 方法 ， 
但 是 它们 被 执行 的 时 间 都 不 尽 相同 。 

在 JavaScript 中 ， 几 乎 所 有 的 事物 都 是 对 象 。 你 已 经 学 习 了 JavaScript 变量 的 赋值 。 
以 下 代码 为 变量 car 设置 值 为 "Fiat". 

var car = "Fiat"; 

对 象 也 是 一 个 变量 ， 但 对 象 可 以 包含 多 个 值 〈 多 个 变量 )。 

var car = {type:"Fiat", model:500, color:"white"}; 

FEW ESE, =/7MA("Fiat", 500, "white it r&i car。 在 以 上 实例 中 ， 三 个 变量 
(type, model, color) 赋予 变量 car. 

1， 对 象 定义 

你 可 以 使 用 字符 来 定义 和 创建 JavaScript 对 象 。 

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 

定义 JavaScript 对 象 可 以 跨越 多 行 ， 空 格 跟 换行 不 是 必需 的 。 


var person = { 
firstName:"John", 
lastName:"Doe", 


age:50, 
eyeColor:"blue" 
1; 
2. 对 象 属性 
可 以 说 “JavaScript 对 象 是 变量 的 容器 ”。 但是， 我们 通常 认为 “JavaScript 对 象 是 键 值 第 
对 的 容器 ”。 4 
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键 值 对 通常 写法 为 name:value 〈 键 与 值 以 冒号 分 割 )。 键 值 对 在 JavaScript 对 象 通常 
称 为 对 象 属 性 。 对 象 键 值 对 的 写法 类 似 于 : PHP 中 的 关联 数组 ，Python 中 的 字典 ，C 语言 
中 的 哈 希 表 等 。 

3. 访问 对 象 属性 

我 们 可 以 通过 两 种 方式 访问 对 象 属性 。 


person. lastName; 


或 者 

person["lastName"]; 

4. 对 象 方法 

对 象 的 方法 定义 了 一 个 函数 ， 并 作为 对 象 的 属性 存储 。 对 象 方法 通过 添加 0 调用 〈 作 
为 一 个 函数 )。 


该 实例 访问 了 person 对 象 的 fallName() 方 法 。 

name = person.fullName(); 

如 果 你 要 访问 person 对 象 的 fullName 属性 ， 它 将 作为 一 个 定义 函数 的 字符 串 返回 。 
name = person. fullName; 


在 随后 的 JavaScript 章节 中 你 将 学 习 到 更 多 关于 函数 ， 属 性 和 方法 的 知识 。 
5. 访问 对 象 方法 
可 以 使 用 以 下 语法 创建 对 象 方法 : 


methodName : function() { code lines } 
你 可 以 使 用 以 下 语法 访问 对 象 方法 : 
objectName .methodName () 


通常 fullNameQE(EA person 对 象 的 一 个 方法 ，fnllName 是 作为 一 个 属性 。 有 多 种 
方式 可 以 创建 ， 使 用 和 修改 JavaScript 对 象 。 同样 也 有 多 种 方式 可 以 用 来 创建 ， 使 用 和 修 
改 属性 和 方法 。 

6. 对象 创 建 样 例 

代码 4-2 提供 一 个 JavaScript 的 对 象 创建 样 例 ， 为 了 像 传统 的 C 系列 语言 一 样 ， 也 为 
了 更 为 灵活 地 创建 对 象 ， 推 荐 使 用 方法 2 创建 对 象 。 

代码 4-2 


<!DOCTYPE html» 

<html> 

<script> 
//Method 1 to create object 
var objl = {name:"namel", age:20, talence:"clever"}; 
obj2 = objl; 





obj2.name = "name2"; 
document.write (0bj2.name) 


//Method 2 to create object (Recommended) 
function Person (name, age) { 

this.name = name; 

this.age = age; 

this.friends = ["Jams","Martin"]; 


this.sayFriends - function() ( 
document.write(this.friends); 


personl = new Person("Kevin", 20); 
person2 = new Person ("OldKevin", 200) ; 
personl.friends.push ("Joe"); 
personl.sayFriends; 


document.write ("<br>"); 
person2.sayFriends(); 


«/script» 
</html> 


1. 245) HTML, CSS, JavaScript 的 使 用 通常 要 准备 哪些 工具 ? 
2. 简单 说 明 JavaScript 的 特点 。 
3. JavaScript 的 每 行 代码 应 当 以 ( ) 结尾 。 


逗号 
号 


4. 什么 是 JavaScript 对 象 ? 
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HTML, CSS, JavaScript 样 例 


dl 
Cc 
ill 


如 果 需 要 使 用 HTML 的 localStorage 技术 ， 那 么 我 们 使 用 httpz//www.w3school. com.cn 
来 学 习 如 何 使 用 。 

。 步骤 1 

使 用 搜索 引擎 搜索 相关 的 问题 ， 搜 索 结 果 如 图 5-1 所 示 。 
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图 5-1 搜索 结果 


。 步骤 2 

选择 相关 的 页 面 ， 例 如 www.w3school.com.en 中 的 HTMLS Web 存储 教程 ，w3school 
搜索 结果 如 图 5-2 所 示 。 

。 步骤 3 

之 后 可 以 进入 示例 代码 页 面 直接 调试 学 习 ， 在 线 调试 界面 如 图 5-3 所 示 。 
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将 相关 代码 〈 代 码 5-1) 移植 到 本 地 ， 会 得 到 同样 的 结果 。 
代码 5-1 
<!DOCTYPE html» 第 
<html> 5 
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<body> 
<div id="result"></div> 


<script> 
//Check browser support 
if (typeof(Storage) !== "undefined") { 
//Store 
localStorage.setItem("lastname", "Gates"); 
//Retrieve 
document .getElementById ("result") .innerHTML = localStorage 
-getItem ("lastname"); 
y else { 
document .getElementById ("result") .innerHTML = "HH! 您 的 浏览 器 不 支持 Web 
Storage ..."; 
} 


</script> 

</body> 

</html> 

在 本 地 浏览 器 中 的 运行 结果 如 图 5-4 所 示 。 
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图 5-4 本 地 调试 结果 


localStorage 的 代码 编辑 界面 和 最 终 浏 览 器 泻 染 结果 如 图 5-5 和 图 5-6 所 示 。 


4-2.html 


<!DOCTYPE html> 
<html> 


<script > 
/Method 1 to create object 
var obj1 = (name:"namel", age:20, talence:"clever"); 
obj2 = obj1; 
0bj2.nane 'ame2"; 
document .write(obj2.name) 


//Method 2 to create object (Recommended) 
function Person(name, age){ 

this.name = name; 

this.age = a 

this. friends ams" ,"Martin"]; 


this.sayFriends = function() { 
document.write(this. friends) ; 
Y 


È 


personl = new Person("Kevin", 26); 
person2 = new Person("OldKevin",200); 
person1. friends. push("Joe" 

person1. sayFriends; 


document .write("«br»") ; 
person2. sayFriends(); 


«/script» 
</html> 
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图 5-5 localStorage 代码 编辑 界面 
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图 5-6 localStorage 执行 结果 
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1. 尝试 使 用 HTML、CSS、JavaScript 实现 一 个 简单 的 时 钟 功能 (<time> 标 签 )。 
2. 尝试 使 用 HTML, CSS, JavaScript 实现 一 个 带 有 界面 的 时 钟 功能 。 


本 部 分 小 结 


通过 第 一 部 分 的 学 习 , 用 户 对 于 HTML、CSS、JavaScript 的 基本 知识 有 了 初步 的 认识 。 
通过 介绍 相关 的 开发 环境 和 学 习 方 法 ， 用 户 可 以 自行 学 习 HTML、CSS、JavaScript 的 相关 
知识 , 甚至 脱离 这 本 书 , 使 用 搜索 引擎 进行 自主 学 习 。 不 过 在 后 面 的 章节 笔者 将 按照 HIML、 
CSS, JavaScript 这 三 个 技术 分 别 进行 了 更 为 详细 的 讲解 。 笔 者 将 选择 三 种 技术 中 最 重要 、 
最 核心 的 部 分 进行 讲解 ， 让 读者 能 够 更 高 效 、 更 深刻 地 了 解 HTML、CSS、JavaScript 的 特 
点 和 应 用 。 














第 二 部 分 HTML 


前 面 对 HTML. CSS. JavaScript 的 快速 入 门 进 行 了 讲解 ， 相 信 读 者 对 于 HTML. CSS. 
JavaScript 有 了 基本 的 了 解 , 拥有 了 前 端 开发 这 方面 一 定 的 自学 能 力 。 接 下 来 的 第 二 篇 将 会 
单独 从 HTML 的 角度 ， 选 择 一 些 重点 的 知识 进行 进一步 的 深入 讨论 。 

第 6 章 HTML 介绍 

第 7 章 基本 概念 

第 8 章 常用 控件 

第 9 章 代码 规范 


第 10% HTML 样 例 





第 6 章 HTML 介绍 


Dil 


6.1 标记 语 








标记 语言 〈 也 称 置 标语 言 、 标 记 语 言 、 标 志 语言 、 标 识 语言 ) 是 一 种 将 文本 (text) 
以 及 文本 相关 的 其 他 信息 结合 起 来 ， 从 而 展现 出 关于 文档 结构 和 数据 处 理 细节 的 计算 机 文 
字 编 码 。 与 文本 相关 的 其 他 信息 (包括 例如 文本 的 结构 和 表示 信息 等 ) 与 原来 的 文本 结合 
在 一 起 ， 但 是 使 用 标记 (markup) 进行 标识 。 

标记 语言 的 应 用 十 分 广泛 ， 它 提供 了 一 种 能 够 让 人 类 将 自己 想法 利用 计算 机 表现 出 来 
的 方法 。 这 种 方式 精准 而 且 高 效 ， 通 常用 在 网 页 设计 ， 众 多 应 用 开发 中 ， 还 可 用 在 其 他 开 
发 中 ， 诸 如 Android 和 Windows 开发 都 会 利用 到 XML 文件 中 的 标记 语言 控制 显示 界面 。 
甚至 标记 语言 还 可 以 被 应 用 到 现代 音乐 曲谱 当中 ， 通 过 MusicXML 文件 精准 高 效 地 显示 
曲谱 。 

在 使 用 标记 语言 时 ， 不 能 把 它 机 械 地 看 成 一 种 编程 语言 ， 而 应 将 其 看 成 一 种 使 用 计算 
机 创作 的 工具 。 标 记 语 言 给 人 类 提供 了 一 种 可 以 与 计算 机 打交道 的 绝 佳 手 段 ， 通 过 简单 的 
标签 控制 就 能 够 实现 精准 高 效 的 显示 效果 。 标 记 语 言 在 控制 显示 和 设计 方面 有 着 极为 明显 
的 优势 。 

更 通俗 地 说 ， 标 记 语言 其 实 就 是 一 段 文本 内 ， 不 仅 有 该 文本 真正 需要 传递 给 读者 的 有 
用 信息 ， 更 有 描述 该 段 文 本 中 各 部 分 文字 的 情况 的 信息 。 

举 个 例子 : 

< 问题 > 
< 问题 标题 > 如 何 用 通俗 的 语言 解释 什么 是 HTML 和 标记 语言 ? 
< 问题 描述 > 不 要 百度 


< 回答 > 
< 回答 者 >Teacher 
< 回答 者 简介 >Software Engineer 
< 回答 内 容 >HTML 是 ...... 具体 可 以 查看 维基 百科 的 介绍 , 地 址 是 < 引用 网 址 >www .wiki.com 
< 回答 > 
< 回答 者 > 小 明 
< 回答 者 简介 >zhihuer2 
< 回答 内 容 > 实 名 反对 LS, 我 来 说 明 下 blablabla 


就 像 这 样 ， 标 记 语 言 描述 了 这 个 问题 以 及 问题 下 的 回答 。 这 段 标记 语言 既 描 述 了 文档 








本 身 的 信息 《问题 内 容 和 回答 的 情况 )， 也 描述 了 文档 的 结构 和 各 部 分 的 作用 。 
6.22 HTML 


HTML 是 世界 通用 的 、 用 于 描述 一 个 网 页 的 信息 的 标记 语言 ， 我 们 使 用 的 浏览 器 具有 

可 以 将 HTML 文档 泻 染 并 展示 给 用 户 的 功能 〈 当 你 访问 知 乎 网 站 的 时 候 ， 实 际 上 你 获得 了 

- 份 由 知 乎 提供 给 你 的 HTML 文档 。 浏 览 器 将 根据 HTML 文档 泻 染 出 你 看 到 的 网 页 )。 将 
上 面 那 段 我 刚 发 明 的 标记 语言 “翻译 ”成 HTML， 大 概 就 是 这 样 : 


<header> 
<h1> 如 何 用 通俗 的 语言 解释 什么 是 HTML 和 标记 语言 ? </h1> 
<p> 不 要 百度 。</p> 
</header> 
<section> 
<article> 
<div> 
<span>Test Paragraph</span> 
</div> 
<p> 
HTML 是 blablabla, 具体 可 以 查看 维基 百科 的 介绍 , 地 址 是 <a>www .wiki .com</a> 
</p> 
</article> 
<article> 
<div> 
小 明 ,<span>zhihuer2</span> 
</div> 
<p> 
实名 反对 LS, 我 来 说 明 下 blablabla 
</p> 
</article> 
</section> 


上 一 段 HTML 文本 中 ，<header><article> 这 类 的 带 尖 括 号 的 标记 叫 标签 ， 标 签 描述 了 
文本 的 作用 ， 比 如 <p> 标 签 表 示 其 内 部 的 文本 是 一 个 段落 ，<a> 标 签 标识 内 部 的 文本 是 超 链 
fe; 与 此 同时 ， 通 过 标签 的 互相 嵌 套 ， 表 示 了 这 个 文档 的 结构 。 至 于 哪个 标签 表示 什么 意 
思 、 总 共有 多 少 个 种 类 的 标签 这 类 的 问题 ， 由 万 维 网 联盟 这 一 组 织 规定 。 


1. 什么 是 标记 语言 ? 
2. HTML 与 标记 语言 之 间 有 什么 关系 ? 


HTML 442 
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7.1. 





为 了 深入 地 了 解 HTML, 95 HTML 的 基本 概念 进行 进一步 探 


71 X 素 


1 HTML 元素 语法 


* HTML 元 素 以 开始 标签 起 始 。 

* HTML 元 素 以 结束 标签 终止。 

。 元 素 的 内 容 是 开始 标签 与 结束 标签 之 间 的 内 容 。 

€ W HTML 元 素 具有 空 内 容 (empty content). 

e 空 元 素 在 开始 标签 中 进行 关闭 以 开始 标签 的 结束 而 结束 )。 
。 大 多 数 HTML 元 素 可 拥有 属性 。 

HTML XBRE HTML 元 素 构成 。 


<!DOCTYPE html» 
<html> 


<body> 
<p> 这 是 第 一 个 段落 。</p> 
</body> 


</html> 
以 上 实例 包含 了 三 个 HIML 元 素 ，<html><body> 和 <p>。 
2 常见 元 素 


HTML 元 素 的 分 类 有 块 级 元 素 和 行内 元 素 。 

1. RACH (block) 的 特点 

。 总 是 在 新 行 上 开始 ; 

e 高 度 、 行 高 以 及 外 边 距 和 内 边 距 都 可 控制 ; 

e 宽度 默认 是 它 的 容器 的 100%， 除 非 设 定 一 个 宽度 ; 
e. 它 可 以 容纳 内 联 元 素 和 其 他 块 元 素 。 











2. 内 联 元 素 Cline) 的 特点 








。 Al 








其 他 元 素 都 在 一 行 上 ; 


。 高 和 外 边 距 不 可 改变 ; 

。 宽度 就 是 它 的 文字 或 图 片 的 宽度 ， 不 可 改变 ; 

e 设置 宽度 width 无 效 ; 

e 设置 高 度 height 无 效 ， 可 以 通过 line-height 来 设置 ; 

e VE margin 只 有 左右 margin 有 效 ， 上 下 无 效 ; 

。 设置 padding 只 有 左右 padding 有 效 ， 上 下 则 无 效 。 注 意 元 素 范 围 是 增 大 了 ， 但 是 
对 元 素 周围 的 内 容 是 没 影响 的 ; 

© 内 联 元 素 只 能 容纳 文本 或 者 其 他 内 联 元 素 。 


3. 常见 块 级 元 素 


常见 块 级 元 素 如 表 7-1 所 示 。 


RIA 常见 块 级 元 素 








address 地 址 

blockquote 块 引用 

center 举 中 对 齐 块 (HTML5 取消 了 该 标签 ) 

div 常用 块 级 容易 ， 也 是 CSS layout 的 主要 标签 

dl 定义 列表 

fieldset form 控制 组 

form 交互 表单 

hl 大 标题 

h2 副标题 

h3 3 级 标题 

h4 4 级 标题 

hs 5 级 标题 

h6 6 级 标题 

hr 水 平分 隔 线 

isindex input prompt 

menu 菜单 列表 

noframes frames 可 选 内 容 ，( 对 于 不 支持 frame 的 浏览 器 显示 此 区 块 内 容 ) 

noscript 可 选 脚本 内 容 ( 对 于 不 支持 script 的 浏览 器 显示 此 内 容 ) 

ol 排序 表单 

p 段落 

pre 格式 化 文本 

table 表格 

ul 非 排 序列 表 〈 无 序列 表 ) 

address 地 址 
4. 常见 的 内 联 元 素 n 
常见 内 联 元 素 如 表 7-2 所 示 。 M 
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表 7-2 常见 内 联 元 素 








标签 意义 

a 锚 点 

abbr 缩写 

acronym 首 字 

b 粗 体 〈 不 推荐 ) 

bdo bidi 

big 大 字体 

br 换行 

cite 引用 

code 计算 机 代码 〈 在 引用 源码 的 时 候 需要 ) 
dfn 定义 字段 

em 强调 

font 字体 设 定 〈 不 推荐 ) 
i 斜体 

img 图 片 

input 输入 框 

kbd 定义 键盘 文本 

label 表格 标签 

q 短 引用 

s "Pus CAS HERE) 
samp 定义 范例 计算 机 代码 
select 项 目 选择 

small 小 字体 文本 

span 常用 内 联 容器 ， 定 义 文本 内 区 块 
strike 中 夯 线 

strong 粗 体 强调 

sub 下 标 

sup 上 标 

textarea 多 行文 本 输入 框 

tt 电 传 文本 

u 下 夯 线 

Var 定义 变量 


71.3 HTML £414 4 
1. <p> 元 素 
<p> 这 是 第 一 个 段落 。</p> 


这 个 <p> 元 素 定义 了 HTML 文档 中 的 


-个 段落 。 这 个 元 素 拥有 一 个 开始 标签 <p> 以 及 


-个 结束 标签 </p>。 元 素 内 容 是 : 这 是 第 一 个 段落 。 


2. <body> 元 素 


<body> 


<p> 这 是 第 一 个 段落 。</p> 
</body> 
<body> 元 素 定义 了 HTML 文档 的 主体 。 


这 个 元 素 拥有 一 个 开始 标签 <body> 以 及 一 个 结束 标签 <body> 。 元 素 内 容 是 另 一 个 
HTML 元 素 Cp 元 素 )。 
3. <html> 元 素 


<html> 
<body> 


<p> 这 是 第 一 个 段落 。</p> 
</body> 


</html> 

<html> 元 素 定义 了 整个 HTML 文档 。 

这 个 元 素 拥 有 一 个 开始 标签 <html> 和 一 个 结束 标签 </html>。 元 素 内容 是 另 一 个 HTML 
元 素 (body 元 素 )。 


7.1.4 小 知识 


1. 结束 标签 

即使 忘记 了 使 用 结束 标签 ， 大 多 数 浏 览 器 也 会 正确 地 显示 HTML. 
<p> 这 是 一 个 段落 

<p> 这 是 一 个 段落 


以 上 实例 在 浏览 器 中 也 能 正常 显示 ， 因 为 关闭 标签 是 可 选 的 。 但 不 要 依赖 这 种 做 法 。 
忘记 使 用 结束 标签 会 产生 不 可 预料 的 结果 或 错误 。 

2. HIML 空 元 素 

没有 内 容 的 HTML 元 素 被 称 为 空 元 素 。 空 元 素 是 在 开始 标签 中 关闭 的 。<br> 就 是 没 
有 关闭 标签 的 空 元 素 (<br> 标签 定义 换行 )。 

在 XHTML、XML 以 及 未 来 版 本 的 HIML 中 ， 所 有 元 素 都 必须 被 关闭 。 在 开始 标签 
中 添加 斜 本， 比如 <br >， 是 关闭 空 元 素 的 正确 方法 ，HTML、XHTML 和 XML 都 接受 
这 种 方式 。 即 使 <br> 在 所 有 浏览 器 中 都 是 有 效 的 ， 但 使 用 <br 人 其 实 是 更 长 远 的 保障 。 

3. 大 小 写 标签 

HTML 标签 对 大 小 写 不 敏感 : <P> 等 同 于 <p>。 许 多 网 站 都 使 用 大 写 的 HTML 标签 。 
本 书 中 使 用 的 是 小 写 标签 ， 因 为 万 维 网 联盟 CW3CO 在 HTML 4 中 推荐 使 用 小 写 ， 而 在 未 
来 CX) HTML 版 本 中 强制 使 用 小 写 。 


7.2 属 性 


HTML 标签 可 以 拥有 属性 。 属 性 提供 了 有 关 HTML 元 素 的 更 多 的 信息 。 属 性 总 是 以 | 7 
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名 称 / 值 对 的 形式 出 现 ， 比 如 : name="value"。 属 性 总 是 在 HTML 元 素 的 开始 标签 中 规定 。 
7.2.1 属性 语法 


。 HTML 元 素 可 以 设置 属性 。 

。 属性 可 以 在 元 素 中 添加 附加 信息 。 

。 属性 一 般 描 述 于 开始 标签 。 

e 属性 总 是 以 名 称 / 值 对 的 形式 出 现 ， 比 如 : name="value" 。 

1. HTML 属性 常用 引用 属性 值 

属性 值 应 该 始终 被 包括 在 引号 内 。 双 引号 是 最 常用 的 ， 不 过 使 用 单 引号 也 没有 问题 。 
在 某 些 个 别 的 情况 下 ， 比 如 属性 值 本身 就 含有 双 引 号 ， 那 么 您 必须 使 用 单 引号 ， 例 如 : 


name='John "ShotGun" Nelson" 


2. HTML 提示 : 使 用 小 写 属性 


属性 和 属性 值 对 大 小 写 不 敏感 。 不 过 ， 万 维 网 联盟 在 其 HTML 4 推荐 标准 中 推荐 小 写 
的 属性 /属性 值 。 而 新 版 本 的 (X)HTML 要 求 使 用 小 写 属性 。 


3. HTML 属性 参考 手册 





查看 完整 的 HTML 属性 列表 : HTML. 标签 参考 手册 。 下 面 列 出 了 适用 于 大 多 数 HTML 














元 素 的 属性 。 
7.2.2 常见 属性 
表 7-3、 表 7-4、 表 7-5、 表 7-6 分 别 列举 了 对 齐 ， 范围 属性 、 色 彩 属性 、 表 属性 和 img 
属性 。 
表 7-3 对 齐 ， 范 围 属 性 
属性 意义 
ALIGN=LEFT 左 对 齐 〈 默 认 值 ) 
WIDTH= 像 素 值 或 百分比 ， 对 象 宽度 宽度 
HEIGHT= 像 素 值 或 百分比 对 象 高 度 1 
ALIGN=CENTER 居中 
ALIGN=RIGHT 右 对 齐 
表 7-4 色彩 属性 
属性 意义 
COLOR=#RRGGBB 前 景色 
BGCOLOR=#RRGGBB 背景 色 
RIS 表 属 性 
属性 意义 
cellpaddine= 数 值 单位 是 像素 定义 表 元 内 距 
cellspacing= 数 值 单位 是 像素 定义 表 元 间距 
border= 数 值 单 位 是 像素 定义 表格 边框 宽度 


width= 数 值 单位 是 像素 或 窗口 百分比 


定义 表格 宽度 





续 表 








属性 意义 
background= 图 片 链接 地 址 定义 表格 背景 图 
Colspan="" 单元 格 跨越 多 列 
Rowspan="" 单元 格 跨越 多 行 
Width="" 定义 表格 宽度 
Height="" 定义 表格 高 度 
Align="" 对 齐 方式 
Border="" 边框 宽度 
Bgcolor="" 背景 色 
Bordercolor="" 边框 颜色 
Bordercolorlight="" 边框 明亮 面 的 颜色 
Bordercolordark="" 边框 暗淡 面 的 颜色 
Cellpadding="" 内 容 与 边框 的 距离 (默认 为 2) 
Cellspacing="" 单元 格 间 的 距离 (默认 为 2) 
表 7-6 img 属性 
属性 意义 
sre="../../" 图 片 链 接地 址 
filter:"" 样式 表 滤 镜 
Alpha:"" 透明 滤 镜 
opacity:100(0~100); 不 透明 度 
style:2 样式 (0 一 3) 
rules="none" 不 显示 内 框 
<embed src="…"> 多 媒体 文件 标识 


7.2.3 属性 实例 
1. 属性 例子 1 


代码 7-1 实现 一 个 HTML 元 素 对 齐 属性 控制 实例 。 


代码 7-1 
«hl» 定义 标题 的 开始 。 


<hl align="center"> 拥有 关于 对 齐 方式 的 附加 信息 。 
在 浏览 器 和 编辑 器 中 的 显示 效果 如 图 7-1 所 示 。 


2. 属性 例子 2 


代码 7-2 实现 一 个 HIML 元 素颜 色 属 性 控制 实例 。 


代码 7-2 


<body> 定义 HTML 文档 的 主体 。 


<body bgcolor="yellow"> 拥有 关于 背景 颜色 的 附加 信息 。 


在 浏览 


和 编辑 器 中 的 显示 效果 如 图 7-2 所 示 。 
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This is heading 1 


面 中 进行 了 居中 排列 - 上 面 的 标题 在 页 面 中 进行 了 居中 排列 。 上 而 的 标题 在 页 面 中 m: + 
PA 





图 7-1 属性 样 例 1 在 浏览 器 和 编辑 器 中 的 显示 效果 


请 看 : 改变 了 颜色 的 背景 。 





图 7-2 属性 样 例 2 在 浏览 器 和 编辑 器 中 的 显示 效果 


3. 属性 例子 3 
代码 7-3 实现 一 个 HTML 元 素颜 





代码 7-3 





<table> 定义 HTML 表格 。 (您 将 在 稍 后 的 章节 学 
«table border="1"> 拥有 关于 表格 边框 的 附加 信 


在 浏览 器 和 编辑 器 中 的 显示 效果 如 图 7-3 所 示 。 


到 更 多 有 关 HTML 表格 的 内 容 ) 








Heading [Another Heading 





图 7-3 ”属性 样 例 3 在 浏览 器 和 编辑 器 中 的 显示 效果 
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样式 即 style， 它 用 于 改变 HTML 元 素 的 样式 ， 通 常 通过 CSS 实现 。 
7.3.1 简介 


HTML 的 style 属性 提供 了 一 种 改变 所 有 HTML 元 素 的 样式 的 通用 方法 。 样 式 是 HIML 
4 引入 的 ， 它 是 一 种 新 的 首选 的 改变 HTML 元 素 样式 的 方式 。 通 过 HTML 样式 ， 能 够 通过 
使 用 style 属性 直接 将 样式 添加 到 HTML 元 素 , 或 者 间接 地 在 独立 的 样式 表 中 (CSS 文件 ) 
进行 定义 。 
CSS (style) 有 以 下 三 种 使 用 方式 : 
。 内 联 样式 : 在 HTML 元 素 中 使 用 "style" 属 性 ; 
。 内 部 样式 表 : 在 HTML 文档 头 部 <head> 区 域 使 用 <style> 元 素 来 包含 CSS; 
e 外 部 引用 : 使 用 外 部 CSS 文件 。 第 
最 好 的 方式 是 通过 外 部 引用 CSS 文件 。 7 
x 
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7.3.2 内 联 样式 


当 特 殊 的 样式 需要 应 用 到 个 别 元 素 时 ， 就 可 以 使 用 内 联 样式 。 使 用 内 联 样式 的 方法 是 
在 相关 的 标签 中 使 用 样式 属性 。 样 式 属性 可 以 包含 任何 CSS 属性 。 以 下 实例 显示 出 如 何 








改变 段落 的 颜色 和 左 外 边 距 。 
<p style="color:blue;margin-left:20px;">This is a paragraph.</p> 
1. HTML 样式 实例 一 一 背景 颜色 
背景 色 属 性 (background-color) 定义 一 个 元 素 的 背景 颜色 ， 见 代码 7-4。 
代码 7-4 


<body style="background-color: yellow; "> 
<h2 style="background-color: red; "> 这 是 一 个 标题 </h2> 
<p style-"background-color:green; "> 这 是 一 个 段落 。</P> 





</body> 
HTML 样式 实例 一 一 背景 颜色 在 浏览 器 中 的 显示 效果 如 图 7-4 所 示 。 


早期 背 








可 以 使 有 


上 的 
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图 7-4 HTML 样式 实例 一 一 背景 颜色 在 浏览 器 中 的 显示 效果 





景色 属性 (background-color) 是 使 用 bgcolor 属性 定义 ， 这 个 属性 在 这 里 也 


2. HTML 样式 实例 一 一 字体 、 字 体 颜色 、 字 体 大 小 

使 用 font-family (字体 )、color (颜色 ) 和 font-size (字体 大 小 ) 属性 可 以 定义 字体 的 
样式 ， 见 代码 7-5. 

代码 7-5 

«hl style="font-family: verdana; "> 一 个 标题 </h1> 

<p style="font-family:arial;color:red;font-size:20px;"> 一 个 段落 。</p> 


在 浏览 器 中 的 显示 效果 如 图 7-5 所 示 。 


e D file:/[/Users)mac/Desktop/f¥ /HTMLFS/Code/code-11/10-5.html e o ó of 











图 7-5 HTML 样式 实例 一 一 字体 、 字 体 颜色 、 字 体 大 小 在 浏览 器 中 的 显示 效果 


现在 通常 使 用 font-family CF), color Hf) 和 font-size〈 字 体 大 小 ) 属性 来 定义 
文本 样式 ， 而 不 是 使 用 <font> 标 签 。 

3. HTML 样式 实例 一 一 文本 对 齐 方式 

使 用 text-align 〈 文 字 对 齐 ) 属性 指定 文本 的 水 平 与 垂直 对 齐 方式 ， 见 代码 7-6。 

代码 7-6 





«hl style="text-align:center;"> 居 中 对 齐 的 标题 </h1> 
<p> 这 是 一 个 段落 。</p> 

在 浏览 器 中 的 显示 效果 如 图 7-6 所 示 。 

文本 对 齐 属 性 text-align 取代 了 旧 标 签 <center>. 
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居中 对 齐 的 标题 


图 7-6 HTML 样式 实例 一 一 文本 对 齐 方式 在 浏览 器 中 的 显示 效果 


7.3.3 内 部 样式 表 


当 单 个 文件 需要 特别 样式 时 ， 就 可 以 使 用 内 部 样式 表 。 在 <head> 部 分 通过 <style> 标 签 
可 以 定义 内 部 样式 表 。 


<head> 
<style type="text/css"> 
body {background-color: yellow; } 
p {color:blue; } 
</style> 
</head> 


完整 代码 如 代码 7-7。 
代码 7-7 


<!DOCTYPE html» 

<html> 

<head> 

<style type="text/css"> 

body {background-color: yellow; } 

p {color:blue; } 

</style> 

«meta charset-"utf-8"» 
«title»HTML/CSS/JavaScript Guider</title> 


</head> 
<body> 


«hl style="text-align:center; "> 居中 对 齐 的 标题 </h1> 
<p> 这 是 一 个 段落 。</p> 





</body> 
</html> 
在 浏览 器 中 的 显示 效果 如 图 7-7 所 示 。 
ene o file:///Jsers/mac/Desktop/ fF it HTML li/Code/code-11/10-7.ntrnl © & 
居中 对 齐 的 标题 
这 是 一 个 段落 ， 


图 7-7 HTML 样式 实例 一 一 文本 对 齐 方式 在 浏览 器 中 的 显示 效果 


7.3.4 外 部 样式 表 


当 样 式 需 要 被 应 用 到 很 多 页 面 时 ， 外 部 样式 表 将 会 是 理想 的 选择 。 使 用 外 部 样式 表 ， 


就 可 以 通过 更 改 一 个 文件 来 改变 整个 站 点 的 外 观 。 


<head> 

<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 

CSS 文件 代码 如 下 。 

body { 


background-color:black; 
$ 
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color:pink; 
} 


HTML 文件 代码 如 代码 7-8 所 示 。 
代码 7-8 


<!DOCTYPE html» 
«html» 


«head» 
<link rel="stylesheet" type="text/css" href="10-8.css"> 
<meta charset-"utf-8"» 
«title»HTML/CSS/JavaScript Guider</title> 

</head> 


<body> 
<p> 这 是 一 个 段落 。</p> 
</body> 


</html> 


注意 HTML 文件 和 CSS 文件 的 相对 路 径 要 与 <link> 标 签 中 的 hre 人 "10-8.css" 一 致 ， 如 
图 7-8 Bras 
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7-8 HTML 和 CSS 文件 相对 路 径 


浏览 器 中 的 显示 效果 如 图 7-9 所 示 。 





图 7-9. HTML 样式 实例 一 一 文本 对 齐 方 式 在 浏览 器 中 的 显示 效果 


7.3.5 HTML 样式 标签 
HTML 样式 标签 如 表 7-7 所 示 。 
表 7-7 HTML 样式 标签 





标签 描述 
<style> 定义 文本 样式 
<link> 定义 资源 引用 地 址 


736 已 痉 用 的 标签 和 属性 


在 HTML 4， 原 来 支持 定义 HTML 元 素 样式 的 标签 和 属性 已 被 弃 用 。 这 些 标签 将 不 文 
持 新 版 本 的 HTML f 不 建议 使 用 的 标签 有 : <font>, <center>. <strike>. AEM (HHA 


的 属性 : color 和 bgcolor。 
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注释 标签 用 于 在 源 代 码 中 插入 注释 。 注 释 不 会 显示 在 浏览 器 中 ， 如 代码 7-9 所 示 。 


Hos 
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代码 7-9 
«1--XJÉ—BHER. HEROS AED ARP Ros. -> 
<p> 这 是 一 段 普通 的 段落 。</p> 


可 使 用 注释 对 代码 进行 解释 ， 这 样 做 有 助 于 在 以 后 的 时 间 对 代码 进行 编辑 。 这 在 编写 
了 大 量 代码 时 尤为 有 用 。 使 用 注释 标签 来 隐藏 浏览 器 不 支持 的 脚本 也 是 一 个 好 习惯 (这 样 
就 不 会 把 脚本 显示 为 纯 文本 )。 注 释 内 容 不 会 显示 ， 注 释 效 果 如 图 7-10 所 示 。 











ese m fle: //Usersimac/Desktop/fEML/HTML®EE/Code/code-10/10-8.hml — (5 & 5 


这 是 一 段 普通 的 段落 。 








图 7-10 注释 效果 
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7.5.1 简介 


大 多 数 HTML 元 素 被 定义 为 块 级 元 素 或 内 联 元 素 。 块 级 元 素 在 浏览 器 显示 时 ,通常 会 
以 新 行 来 开始 和 结束 。 例 如 : <hl>、<p>、<ul>、<table>。 
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1. HTML<div> 和 <span> 

HTML 可 以 通过 <div> 和 <span> 将 元 素 组 合 起 来 。 

2. HTML 内 联 元 素 

内 联 元 素 在 显示 时 通常 不 会 以 新 行 开始 。 实 例 : <b>. <td>. <a>. <img>. 

3. HTML<div> 元 素 

HTML <div> 元 素 是 块 级 元 素 ， 它 可 用 于 组 合 其 他 HTML 元 素 的 容器 。<div> 元 素 没有 
特定 的 含义 。 除 此 之 外 ， 由 于 它 属 于 块 级 元 素 ， 浏 览 器 会 在 其 前 后 显示 折 行 。 如 果 与 CSS 


























- 同 使 用 ，<div> 元 素 可 用 于 对 大 的 内 容 块 设置 样式 属性 。<div> 元 素 的 另 一 个 常见 的 
途 是 文档 布局 。 它 取代 了 使 用 表格 定义 布局 的 老式 方法 。 使 用 <table> 元 素 进行 文档 布局 
不 是 表格 的 正确 用 法 。<table> 元 素 的 作用 是 显示 表格 化 的 数据 。 

4. HTML <span> 元 素 

HTML <span> 元 素 是 内 联 元 素 ， 可 用 作文 本 的 容器 <span> 元 素 也 没有 特定 的 含义 。 当 
与 CSS 一 同 使 用 时 ，<span> 元 素 可 用 于 为 部 分 文本 设置 样式 属性 。 

5. HTML 分 组 标签 

HTML 分 组 标签 如 表 7-8 所 示 。 


表 7-8 HTML 分 组 标签 














标签 描述 
<div> 定义 了 文档 的 区 域 ， 块 级 (block-level) 
<span> 用 来 组 合 文档 中 的 行内 元 素 ， 内 联 元 素 (inline) 


1. HTML 元 素 基本 语法 有 哪儿 点 ? 
2. 没有 结束 标签 HTML， 一 定 会 显示 错误 吗 ? 
3. 下 列 选项 属于 HTML 空 元 素 的 一 项 是 s 
A. <p>123</p> 
B. <script> alert("Hello"); </script> 
C. <br></br> 
D. <html>null</html> 
4. 下 列 不 属于 img 属性 的 是 ( Ja 
A. E a 
B. filter:"" 
C. Alpha:"" 
D. Colspan="" 
5. 什么 是 CSS 内 联 样式 ? 
6. 什么 是 <div>? 





第 8 章 常用 控件 





81 X H8 


8.1.1 简介 


HTML 表单 用 于 接收 不 同类 型 的 用 户 输入 , 用户 提交 表单 时 向 服务 器 传输 数据 ， 从 而 
实现 用 户 与 Web 服务 器 的 交互 。 表 单 的 工作 机 制 如 图 8-1 所 示 。 


表单 工作 机 制 


浏览 器 将 用 户 在 表单 中 给 
入 的 数据 进行 打包 ， 并 发 送 给 
服务 器 


E p 
/ 


访问 一 个 包含 表单 的 页 面 ， 
RARBG, “UA” A$ 

















Web 服 务 器 


in. 


图 8-1 表单 的 工作 机 制 


8.1.2 表单 定义 


HTML 表单 是 一 个 包含 表单 元 素 的 区 域 ， 表单 使 用 <form> 标签 创建 。 表 单 能 够 包 
含 <a target="_blank" title="HTML input 元 素 ， 比 如 文本 字段 、 复 选 框 、 单 选 框 、 提 交 按 钮 
等 。 表 单 还 可 以 包含 <a target="_blank" title="HTML menus, <a target="_blank" title="HTML 
textarea, <a target="_blank" title-"HTML fieldset, <a target="_blank" title-"HTML legend 和 
<a target="_blank" title="HTML label 702%. JERE, <form > 元 素 是 块 级 元 素 ， 其 前 后 会 产生 
折 行 。 








<form action="reg.ashx" method="post"> 


<!-- 表 单元 素 在 这 里 --> 
</form> 


8.1.3 表单 属性 


1. action 

规定 当 提交 表单 时 , 向 何 处 发 送 表 单数 据 . action 取 值 为 : 第 一 , 一 个 URL (绝对 URL/ 
相对 URL), 一 般 指向 服务 器 端 一 个 程序 ,程序 接收 到 表单 提交 过 来 的 数据 ( 即 表 单元 素 值 
作 相 应 处 理 ， 比 如 <form action="http://www.cnblogs.com/reg.ashx">， 当 用 户 提 交 这 个 表单 
时 , 服务 器 将 执行 网 址 "http://www.cnblogs.com/" 上 的 名 为 "reg.ashx" 的 一 般 处 理 程序 ; 第 二 ， 
使 用 mailto 协议 的 URL 地 址 ， 这 样 会 将 表单 内 容 以 电子 邮件 的 形式 发 送出 去 ， 这 种 情况 
是 比较 少见 的 ， 因 为 它 要 求 访问 者 的 计算 机 上 安装 和 正确 设置 好 了 邮件 发 送 程序 ， 第 三 ， 
空 值 ， 如 果 action 为 空 或 不 写 ， 表 示 提 交 给 当前 页 面 。 

2. method 

该 属性 定义 浏览 器 将 表单 中 的 数据 提交 给 服务 器 处 理 程 序 的 方式 。 关 于 method 的 取 
值 ， 最 常用 的 是 get 和 post。 第 一 ， 使 用 get 方式 提交 表单 数据 ，Web 浏览 器 会 将 各 表单 字 
段 元 素 及 其 数据 按照 URL 参数 格式 附 在 <form> 标 签 的 action 属性 所 指定 的 URL 地 址 后 面 
发 送 给 Web 服务 器 ;由 于 URL 的 长 度 限 制 ， 使 用 get 方式 传送 的 数据 量 一 般 限 制 在 1KB 
以 下 。 第 二 ， 使 用 post 方式 ， 浏 览 器 会 将 表单 数据 作为 HTTP 请 求 体 的 一 部 分 发 送 给 服务 
器 。 一 般 来 说 ， 使 用 post 方式 传送 的 数据 量 要 比 get 方式 传递 的 数据 量 大 ; 根据 HTML 标 
准 ， 如 果 处 理 表 单 的 服务 器 程序 不 会 改变 服务 器 上 存储 的 数据 ， 则 应 采用 get 方式 〈 比 如 
查询 ), 如 果 表 单 处 理 的 结果 会 引起 服务 器 上 存储 的 数据 的 变化 ， 则 应 该 采用 post FIR CEE 
如 增删 改 操作 )。 第 三 ， 其 他 方式 Chead, put, delete, trace 或 options 等 )。 其 实 ， 最 初 
HTTP 标准 对 各 种 操作 都 规定 了 相应 的 method， 但 后 来 很 多 都 没有 被 遵守 ， 大 部 分 情况 只 
是 使 用 get 或 post 就 能 满足 需求 。 

3. target 

该 属性 规定 在 何 处 显示 action 属性 中 指定 的 URL 所 返回 的 结果 。 取 值 有 _blank (在 新 
窗口 中 打开 )、_self (在 相同 的 框架 中 打开 ,默认 值 )、_parent (在 父 框 架 中 打开 )、_top (在 
整个 窗口 中 打开 ) 和 framename (在 指定 的 框架 中 打开 )。 








4. title 
设置 网 站 访问 者 的 鼠标 放 在 表单 上 的 任意 位 置 停留 时 ， 浏 览 器 用 小 浮标 显示 的 文本 。 
5. enctype 


规定 在 发 送 到 服务 器 之 前 应 该 如 何 对 表单 数据 进行 编码 。 取 值 : 默认 值 为 "application/ 
xX-www-form-urlencoded"， 在 发 送 到 服务 器 之 前 ， 所 有 字符 都 会 进行 编码 (空格 转换 为 "+" 
加 号 ,特殊 符号 转换 为 ASCIT HEX 值 );“multipart/form-data”: 不 对 字符 编码 。 在 使 用 包 
含 文件 上 传 控件 的 表单 时 ， 必 须 使 用 该 值 。 

6. name 

表单 的 名 称 。 注 意 与 id 属性 的 区 别 : name 属性 是 和 服务 器 通信 时 使 用 的 名 称 ; 而 id 
属性 是 浏览 器 端 使 用 的 名 称 ， 该 属性 主要 是 为 了 方便 客户 端 编程 ， 而 在 CSS 和 JavaScript 
中 使 用 的 。 8 
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1. 
单行 文本 框 <input type="text"/> (input 的 type 属性 的 默认 值 就 是 "text") 见 代 码 8-1, 


8.1.4 表单 元 素 


单行 文本 框 


单行 文本 框 显示 效果 如 图 8-2 所 示 。 











图 8-2 单行 文本 框 显 示 效果 


代码 8-1 


<input type = "text" name=" 名 称 "/> 


以 下 是 单行 文本 框 的 主要 属性 。 


size: 指定 文本 框 的 宽度 ， 以 字符 个 数 为 单位 ， 在 大 多 数 浏 览 器 中 ， 文 本 框 的 默认 
宽度 是 20 个 字符 。 

value: 指定 文本 框 的 默认 值 ， 是 在 浏览 器 第 一 次 显示 表单 或 者 用 户 单 击 <input 
type="reset"/> 按 钮 之 后 在 文本 框 中 显示 的 值 。 

maxlength: 指定 用 户 输入 的 最 大 字符 长 度 。 

readonly: 只 读 属性 ， 当 设置 readonly 属性 后 ， 文 本 框 可 以 获得 焦点 ， 但 用 户 不 能 
改变 文本 框 中 的 value 属性 。 

disabled: 禁用 ， 当 文本 框 被 禁用 时 ， 不 能 获得 焦点 。 当 然 ， 用 户 也 不 能 改变 文本 框 
的 值 。 并 且 在 提交 表单 时 ， 浏 览 器 不 会 将 该 文本 框 的 值 发 送 给 服务 器 。 


2. 密码 框 
密码 框 <input type="password" 人 > 见 代 码 8-2， 密 码 框 显示 效果 如 图 8-3 所 示 。 











图 8-3 ”密码 框 显示 效果 


代码 8-2 


<input type="password" name=" 名 称 "/> 


3. 单 选 按钮 

使 用 方式 : 使 用 name 相同 的 一 组 单 选 按钮 ， 对 不 同 radio 设 定 不 同 的 value 属性 ， 这 
样 通过 取 指 定 name 的 值 就 可 以 知道 谁 被 选中 了 ， 而 不 用 单独 判断 。 单 选 按 钮 的 元 素 值 
value 属性 显 式 设置 。 当 表单 提交 时 , 选中 项 的 value 和 name 被 打包 发 送 , 不 显 式 设置 value 
属性 ， 见 代码 8-3， 单 选 按 钮 显示 效果 如 图 8-4 所 示 。 


























eoe» 





Male: 
Female: 





图 8-4 "kp GE AS 
代码 8-3 


<input type="radio" name="gender" value="male" /> 
<input type="radio" name="gender" value="female"/> 


4. 复 选 杠 

使 用 复 选 按钮 组 ， 即 name 相同 的 一 组 复 选 按钮 ， 复 选 按钮 表单 元 素 的 元 素 值 由 value 
属性 显 式 设置 。 当 表达 提交 时 ， 所 有 选中 项 的 value 和 name 被 打包 发 送 不 显 式 设 置 value 
属性 。 复 选 框 的 checked 属性 表示 是 否 被 选中 , <input type="checkbox" checked /> 或 者 <input 
type="checkbox" checked="checked" /> (1fE?£) checked, readonly 等 这 种 一 个 可 选 值 的 属性 
都 可 以 省 略 属性 值 ， 见 代码 8-4， 复 选 框 线 实现 效果 如 图 8-5 所 示 。 


eee «c». | oa 











图 8-5 复 选 框 线 实现 效果 


代码 8-4 


<input type ="checkbox" name="language" value="Java"/> 


<input type -"checkbox" name-"language" value="C"/> 第 
<input type ="checkbox" name="language" value="C#"/> 8 
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5. 隐藏 域 
隐藏 域 通常 用 于 向 服务 器 提交 不 需要 显示 给 用 户 的 信息 ， 见 代码 8-5， 隐 藏 域 显示 效 
果 如 图 8-6 所 示 。 


eee <)>) a 








隐藏 框 
普通 框 








图 8-6 ”隐藏 域 显示 效果 
代码 8-5 
<input type="hidden" name=" 隐 藏 域 "/> 


6. 文件 上 传 <input type="file"/> 

使 用 file, Jl) form 的 enctype 必须 设置 为 multipart/form-data, method 属性 为 POST, 
见 代 码 8-6。 

代码 8-6 


<input name-"uploadedFile" id-"uploadedFile" type-"file" size-"60" accept= 
"text/*"/» 


7. 下 拉 框 <select> 标 签 

<select> 标 记 创 建 一 个 列表 框 ，<option> 标 记 创 建 一 个 列表 项 ，<select> 与 嵌 套 的 
<option> 一 起 使 用 ， 共 同 提供 在 一 组 选项 中 进行 选择 的 方式 。 

将 一 个 option 设置 为 选中 : <option selected> 北 京 </option> 或 者 <option selected= 
"selected"> 北 京 </option> (推荐 方式 ) 就 可 以 将 这 个 项 设 定 为 选择 项 。 如何 实现 “不 选择 ”， 
添加 一 个 <option value="-1">-- 不 选择 --<option>， 然 后 编程 判断 <select> 选 中 的 值 如 果 是 
-1， 就 认为 是 不 选择 。 

select 分 组 选项 ， 可 以 使 用 optgroup 对 数据 进行 分 组 ， 分 组 本 身 不 会 被 选择 ， 无 论 对 
于 下 拉 列 表 还 是 列表 框 都 适用 。 

<select> 标 记 加 上 multiple 属性 ， 可 以 允许 多 选 ( 按 Ctrl 键 选择 )， 见 代码 8-7， 下 拉 框 
样 例 显 示 效 果 如 图 8-7 所 示 。 








Africa 
Gambia 
Madagascar 


Europe 
France 
Russia 
UK 

North America 
Canada 








图 8-7 下拉 框 样 例 显示 效果 
代码 8-7 


<select name="country" size="10"> 
<optgroup label="Africa"> 
<option value="gam">Gambia</option> 
<option value="mad">Madagascar</option> 
<option value="nam">Namibia</option> 
</optgroup> 
<optgroup label="Europe"> 
<option value="fra">France</option> 
<option value="rus">Russia</option> 
<option value="uk">UK</option> 
</optgroup> 
<optgroup label="North America"» 
<option value="can">Canada</option> 
<option value="mex">Mexico</option> 
<option value="usa">USA</option> 
</optgroup> 
</select> 


8. 多 行文 本 <textarea></textarea> 

多 行文 本 <textarea> 创 建 一 个 可 输入 多 行文 本 的 文本 框 ，<textarea> 没 有 value 属 
性 ,<textarea> 文 本 </textarea>，cols=“50” rows=“15” 属 性 表示 行 数 和 列 数 ， 不 指定 则 浏 
览 器 采取 默认 显示 ， 见 代码 8-8， 多 行文 本 显示 效果 如 图 8-8 所 示 。 

代码 8-8 

<textarea name-"textareaContent" rows-"20" cols="50" > 

多 行文 本 框 的 初始 显示 内 容 


</textarea> 
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多 行文 本 框 的 初始 显示 内 容 多 行文 本 
框 的 初始 显示 内 容 多 行文 本 框 的 初始 
显示 内 容 多 行文 本 框 的 初始 显示 内 容 





" 








图 8-8 多 行文 本 显示 效果 


9. <fieldset></fieldset> 标 签 
<fieldset> 标 签 将 控件 划分 成 一 个 区 域 ， 看 起 来 更 规整 ， 见 代码 8-9，<fieldsef> 标 签 显 
示 效 果 如 图 8-9 所 示 。 











图 8-9” ”<fieldset> 标 签 显示 效果 
代码 8-9 


<fieldset> 
<legend> 爱 好 </legend> 
<input type="checkbox" value=" 篮 球 " /> 
<input type="checkbox" value-"/fféili" /> 
<input type="checkbox" value=" 阅 读 " /> 
</fieldset> 
10. 提交 按钮 <input type="submit" /> 
当 用 户 单 击 <input type="submit"/> 的 提交 按钮 时 ， 表 单数 据 会 提交 给 <form> 标 签 的 
action 属性 所 指定 的 服务 器 处 理 程序 。 中 文 TE 浏览 器 下 默认 按钮 文本 为 “提交 查询 ” 可 
以 设置 value 属性 修改 按钮 的 显示 文本 ， 见 代码 8-10， 提 交 按 钮 显示 效果 如 图 8-10 所 示 。 
代码 8-10 





<input type="submit" value=" 提 交 "/> 





eoe < 加 








图 8-10 ”提交 按钮 显示 效果 


11. 重 置 按钮 <input type="reset"/> 

当 用 户 单 击 <input type="reset"/> 按 钮 时 ， 表 单 中 的 值 被 重 置 为 初始 值 。 在 用 户 提 交 表 
单 时 ， 重 置 按钮 的 name 和 value 不 会 提交 给 服务 器 ， 见 代码 8-11， 重 置 按 钮 显示 效果 如 
图 8-11 所 示 。 


Heh 











图 8-11 重 置 按钮 显示 效果 
代码 8-11 
<input type="reset" value=" 重 置 按 钮 "/> 


12. 普通 按钮 <input type="button"/> 
普通 按钮 通常 用 于 单 击 执行 一 段 脚本 代码 ， 见 代码 8-12， 普 通 按钮 显示 效果 如 图 8-12 
所 示 。 





eee <>| D 





普通 按钮 





图 8-12 ”普通 按钮 显示 效果 


代码 8-12 第 
<input type="button" value=" 普 通 按钮 "/> 8 
章 


PALE 


HIML5+CSS3+JavaScript P] I Ez 3 ARE 





13. 图 像 按 钮 <input type="image"/> 

图 像 按 钮 的 src 属性 指定 图 像 源 文件 ， 它 没有 value 属性 。 图 像 按 钮 可 代替 <input 
type="submit"/>, 而 现在 也 可 以 通过 CSS 直接 将 <input type="submit"/> 按 钮 的 外 观 设置 为 一 
幅 图 片 ， 见 代码 8-13， 图 像 按钮 显示 效果 如 图 8-13 所 示 。 


ese [s] ‘e://Users/mac Desktop fll HTML SM /Codejcode-Yi [11-13 num © ol ôl ml 

















图 8-13 ”图像 按钮 显示 效果 
代码 8-13 


<input type-"image" src="bg.jpg" /> 


8.1.5 表单 样 倒 


下 面 提供 一 个 收集 信息 的 表单 的 样 例 。 使 用 form 控件 打造 个 性 化 表单 收集 数据 是 十 分 
方便 的 ，form 的 各 类 属性 基本 上 可 以 提供 常见 的 手机 功能 ， 样 例 见 代码 8-14。 
代码 8-14 


«meta charset-"utf-8"» 
<html> 
<head> 
<title> 注 册页 面 </title> 
<style type="text/css"> 
table 
{ 
width: 450px; 
border: lpx solid red; 


background-color: #FFCB29; 
border-collapse: collapse; 


td 


width: 200; 
height: 40px; 
border: lpx solid black; 
} 
span 
{ 
background-color: red; 
} 
</style> 
</head> 
<body style-"background-color: #0096ff;"> 
<form name="registerform" id-"forml" action-"" method-"post"» 
<table align="center" cellspacing="0" cellpadding="0"> 
<tr> 
<td> 用 户 名 :31 </td> 
<td> 
<input type="text" /> 
</td> 
</tr> 
<tr> 
<td> 密 码 : 39 </td> 
<td> 
<input type="password" /> 
</td> 
</tr> 
<tr> 
<td> 确 认 密码 : 47 </td> 
<td> 
<input type="password" /> 
</td> 
</tr> 
<tr> 
<td> 请 选择 市 : 55 </td> 
<td> 
<select> 
<optgroup label=" 中 国 "> 
<option> 甘 肃 省 </option> 
<option> 河 南 省 </option> 
<option> 上 海 市 </option> 
</optgroup> 
<optgroup label="American"> 
<option>California</option> 
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<option>Chicago</option> 
<option>New York</option> 


</optgroup> 
</select> 
</td> 
</tr> 
<tr> 
<td> 请 选择 性 别 : — 74 </td> 
<td> 


<input type="radio" nam 


"sex" id-"male" value="0" checked= 





"checked" /><label for="male">'§</label> 


<input type="radio" name="sex" id-"fmale" value="1" /> 


<label for="fmale">&K</label> 


<input type="radio" name="sex" id-"secret" value="2" /> 


«label for="secret">{K#</label> 


</td> 
</tr> 
<tr> 


<tqd> 请 选择 职业 : — 84 </td> 


<td> 


<input type="radio" id="student" name="profession" /><label 
for-"student"»"f/E«/label» 

«input type-"radio" id-"teacher" name-"profession" /»«label 
for="teacher"> 教 师 </1abe1> 

<input type="radio" id="others" name="profession" /><label 
for="others"> 其 他 </label> 


</td> 
</tr> 
<tr> 


<td> 请 选择 爱好 : 94 </td> 


<td> 


<fieldset> 


<legend> 你 的 爱好 </legend> 

<input type="checkbox" name="hobby" id-"basketboll" checked= 
"checked" /><label for="basketboll">4] {i#R</label> 
<input type="checkbox" name="hobby" id="run" /><label 
for="run"> 跑 步 </label> 

<input type="checkbox" name="hobby" id="read" /><label 
for="read"> 阅 读 </label> 

<input type="checkbox" name="hobby" id="surfing" /><label 
for- "surfing"> 上 网 </1label> 


</fieldset> 


</td> 
</tr> 
<tr> 


«td»4&ik: 108 «/td» 


«td» 





«textarea cols="30"> 这 里 是 备注 内 容 </textarea> 
</td> 
</tr> 
<tr> 
<td> 
&nbsp; 
«/td» 
«td» 
<input type="submit" value=" 提 交 " /> 
<input type="reset" value=" 重 置 " /> 


</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 
上 述 代码 的 展示 效果 如 图 8-14 所 示 。 
| eec a) file.]//Usors/mac/Desktop/fF Y /HTML T5 /Code/code-11/11-14,htmi c 














图 8-14 表单 样 例 的 展示 效果 


82 iR 体 


8.2.1 HTML 音频 (Audio ) 
声音 在 HTML 中 可 以 以 不 同 的 方式 播放 。 
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1. 使 用 <embed> 元 素 

<embed> 标 签 可 以 定义 外 部 〈 非 HTML) 内 容 的 容器 (这 是 一 个 HTML5 标签 ,在 
HIML4 中 是 非法 的 , 但 是 所 有 浏览 器 中 都 有 效 )。 下 面 的 代码 片段 能 够 显示 嵌入 网 页 中 的 
MP3 文件 : 


<embed height="50" width="100" src="music.mp3"> 


注意 ; 

e <embed> 标签 在 HTML 4 中 是 无 效 的 ， 页 面 无 法 通过 HTML 4 验证 ; 
。 不 同 的 浏览 器 对 音频 格式 的 支持 也 不 同 ; 

e 如 果 浏 览 器 不 支持 该 文件 格式 ， 则 没有 插件 的 话 就 无 法 播放 该 音频 ; 
e 如 果 用 户 的 计算 机 未 安装 插件 ， 则 无 法 播放 音频 ; 

e 如 果 把 该 文件 转换 为 其 他 格式 ， 则 仍然 无 法 在 所 有 浏览 器 中 播放 。 


2. 使 用 <object> 元 素 

<object tag» 标签 也 可 以 定义 外 部 CIE HTML) 内 容 的 容器 。 下 面 的 代码 片段 能 够 显 
示 构 入 网 页 中 的 MP3 文件 。 

<object height="50" width="100" data="music.mp3"></object> 


注意 : 

。 不 同 的 浏览 器 对 音频 格式 的 支持 也 不 同 ; 

e 如 果 浏 览 器 不 支持 该 文件 格式 ， 则 没有 插件 的 话 就 无 法 播放 该 音频 ; 
。 如 果 用 户 的 计算 机 未 安装 插件 ， 则 无 法 播放 音频 ; 

e 如 果 把 该 文件 转换 为 其 他 格式 ， 则 仍然 无 法 在 所 有 浏览 器 中 播放 。 


3. 使 用 HTMLS <audio> 元 素 
HTMLS <audio> 元 素 是 一 个 HIMLS 元 素 ， 在 HTML 4 中 是 非法 的 ， 但 在 所 有 浏览 器 
中 都 有 效 。 以 下 将 使 用 <audio> 标 签 来 描述 MP3 文件 internet Explorer, Chrome 以 及 Safari 
中 是 有 效 的 )， 同 样 添加 了 一 个 OGG 类 型 文件 (Firefox 和 Opera 浏览 器 中 有 效 )。 如 果 失 
败 ， 它 会 显示 一 个 错误 文本 信息 。 
<audio controls> 
<source src="music.mp3" type="audio/mpeg"> 
<source src="music.ogg" type="audio/ogg"> 


Your browser does not support this audio format. 
</audio> 


注意 : 

e <audio> 标 签 在 HTML 4 中 是 无 效 的 ， 该 页 面 无 法 通过 HTML 4 验证 ; 
。 必须 把 音频 文件 转换 为 不 同 的 格式 ; 

* <audio> 元 素 在 老式 浏览 器 中 不 起 作用 。 


4. 最 好 的 HTML 音频 解决 方法 
下 面 的 例子 使 用 了 两 个 不 同 的 音频 格式 。HTML5 <audio> 元 素 会 尝试 以 MP3 或 OGG 
来 播放 音频 。 如 果 失 败 ， 代 码 将 回 退 尝试 <embed> 元 素 。 


<audio controls height="100" width="100"> 
<source src="music.mp3" type="audio/mpeg"> 
<source src="music.ogg" type="audio/ogg"> 
<embed height="50" width="100" src="music.mp3"> 
</audio> 


注意 : 
。 必须 把 音频 转换 为 不 同 的 格式 ; 
e <embed> 元 素 无 法 回 退 来 显示 错误 消息 。 


82.2 HTML 视频 ( Videos ) 


1. 使 用 <embed> 标 签 

<embed> 标签 的 作用 是 在 HTML 页 面 中 嵌入 多 媒体 元 素 。 下 面 的 HTML 代码 显示 
柑 入 网 页 的 Flash 视频 。 

<embed src="intro.swf" height="200" width="200"> 


注意 : 

* HTMLA 无 法 识别 <embed> 标 签 ， 该 页 面 无 法 通过 验证 ; 

e 如 果 浏 览 器 不 支持 Flash， 那 么 视频 将 无 法 播放 ; 

。 iPad 和 iPhone 不 能 显示 Flash 视频 ; 

e 如 果 将 视频 转换 为 其 他 格式 ， 那 么 它 仍然 不 能 在 所 有 浏览 器 中 播放 。 


2. 使 用 <object> 标 签 
<object> 标签 的 作用 是 在 HTML 页 面 中 嵌入 多 媒体 元 素 。 下 面 的 HTML 片段 显示 
嵌入 网 页 的 一 段 Flash 视频 。 


<object data="intro.swf" height="200" width="200"></object> 


注意 : 

e 如 果 浏 览 器 不 支持 Flash， 将 无 法 播放 视频 ; 

e iPad 和 iPhone 不 能 显示 Flash 视频 ; 

e 如 果 将 视频 转换 为 其 他 格式 ， 那 么 它 仍然 不 能 在 所 有 浏览 器 中 播放 。 


3. 使 用 HTMLS <video> 元 素 

HTMLS «video» 标签 定义 了 一 个 视频 或 者 影片 .<video> 元 素 在 所 有 现代 浏览 器 中 都 
支持 。 以 下 HTML 片段 会 显示 一 段 杠 入 网 页 的 Ogg、MP4 或 WebM 格式 的 视频 。 

实例 


<video width="320" height="240" controls> 
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<source src="movie.mp4" type="video/mp4"> 
<source src="movie.ogg" type="video/ogg"> 
<source src="movie.webm" type="video/webm"> 

您 的 浏览 器 不 支持 video 标签 。 

</video> 

注意 : 

。 必须 把 视频 转换 为 很 多 不 同 的 格式 ; 

e «video» 元 素 在 老式 浏览 器 中 无 效 。 


4. 最 好 的 HTML 视频 解决 方法 

以 下 实例 中 使 用 了 四 种 不 同 的 视频 格式 。HTML 5 <video> 元 素 会 尝试 播放 以 MP4、 
Ogg 或 WebM 格式 中 的 一 种 来 播放 视频 。 如 果 均 失败 ， 则 回 退 到 <embed> 元 素 。 HTML 5 
+ <object> + <embed> 实 现 如 下 : 


<video width="320" height="240" controls> 
«source src-"movie.mp4" type="video/mp4"> 
«source src-"movie.ogg" type-"video/ogg"» 
<source src-"movie.webm" type-"video/webm"» 
<object data-"movie.mp4" width-"320" height="240"> 

<embed src-"movie.swf" width="320" height="240"> 

</object> 

</video> 


注意 : 

e. 必须 把 视频 转换 为 很 多 不 同 的 格式 。 

5， 视 频 网 站 解决 方案 

在 HTML 中 显示 视频 的 最 简单 的 方法 是 使 用 优酷 、 土 豆 、YouTube 等 视频 网 站 。 如 
果 希 望 在 网 页 中 播放 视频 ， 那 么 可 以 把 视频 上 传 到 优酷 等 视频 网 站 ， 然 后 在 该 网 页 中 插入 
HTML 代码 即 可 播放 视频 ， 代 码 如 下 : 


<embed src="http://player.youku.com/player.php/sid/XMzI2NTcANTMy/vV.swf" 
width="480" height="400" type="application/x-shockwave-flash"> </embed> 


6. 使 用 超 链 接 

如 果 网 页 包含 指向 媒体 文件 的 超 链 接 ， 大 多 数 浏 览 器 会 使 用 “辅助 应 用 程序 ”来 播放 
文件 。 以 下 代码 片段 显示 指向 AVI 文件 的 链接 。 如 果 用 户 单 击 该 链接 , 浏览 器 会 启动 “ 辅 
助 应 用 程序 ” 比如 用 Windows Media Player 来 播放 这 个 AVI 文件 : 


<a href="intro.swf">Play a video file</a> 


8.3 DIV+CSS 


DIV4CSS 是 当下 网 页 开发 中 最 常用 的 一 套 技术 ， 使 用 DIV+CSS 的 开发 模式 可 以 设计 


出 极为 丰富 的 网 页 显示 效果 。DIV 元 素 就 像 网 页 的 骨架 , 而 CSS 则 是 让 网 页 变 得 生动 的 “ 血 
TIL". DIV 的 灵活 性 和 CSS 的 标准 可 复 用 性 相辅相成 ， 让 网 页 开发 变 得 系统 而 高 效 。 


8.3.1 什么 是 DIV+CSS 


DIV+CSS 是 网 站 标准 (或 称 “WEB 标准 ”) 中 常用 术语 之 一 ，DIV+CSS 是 一 种 网 页 
的 布局 方法 ， 这 一 种 网 页 布局 方法 有 别 于 传统 的 HTML 网 页 设计 语言 中 的 表格 (table) 定 
位 方式 ， 可 实现 网 页 页 面 内 容 与 表现 相 分 离 。XHTML 是 The Extensible HyperText Markup 
Language〈 可 扩展 超 文本 标识 语言 ) 的 缩写 。 XHTML 基于 可 扩展 标记 语言 (XML) ， 是 

-种 在 HIML 基础 上 优化 和 改进 的 新 语言 ,目的 是 基于 XML 应 用 与 强大 的 数据 转换 能 力 ， 
适应 未 来 网 络 应 用 更 多 的 需求 。 在 XHTML 网 站 设计 标准 中 ， 不 再 使 用 表格 定位 技术 ， 而 
是 采用 DIV+CSS 的 方式 实现 各 种 定位 。 


83.2 DIV+CSS 产生 背景 


HTML 语言 自 HIML4.01 以 来 ， 不 再 发 布 新 版 本 ， 原 因 就 在 于 HIML 语言 正 变 得 越 
来 越 复杂 化 、 专 用 化 。 即 标记 越 来 越 多 ， 甚 至 各 个 浏览 器 生产 商 也 开发 出 只 适合 于 其 特定 
浏览 器 的 HTML 标记 ,这 显然 有 碍 于 HTML 网 页 的 兼容 性 。 于 是 W3C 组 织 重新 从 SGML 
中 获取 营养 ， 随 后 发 布 了 XML。 

XML 是 一 种 比 HTML 更 加 严格 的 标记 语言 ， 全 称 是 可 扩展 标记 语言 (EXtensible 
Markup Language) 。 但 是 XML 过 于 复杂 ， 且 当前 的 大 部 分 浏览 器 都 不 完全 支持 XML. 于 
是 XHTML 这 种 语言 就 派 上 了 用 场 ， 用 XHTML 语言 重 写 后 的 HTML 页 面 可 以 应 用 许多 
XML 应 用 技术 。 使 得 网 页 更 加 容易 扩展 ， 适 合 自动 数据 交换 ， 并 且 更 加 规整 。 

而 CSS 关键 就 在 于 其 与 脚本 语言 (如 JavaScript) 及 XML 技术 的 融合 ， 即 
CSS+JavaScripttXML (实际 上 有 一 种 更 好 的 融合 : XML+XSL+JavaScript) 一 一 但 XSL, 
即 可 扩展 样式 表 语 言 相 较 于 CSS 过 于 复杂 ， 不 太 容 易 上 手 。 自 从 CSS 出 现 之 后 ，HTML 
终于 摆脱 了 杂乱 无 章 的 豆 梦 ， 开 始 将 页 面 内 容 与 样式 分 离 。 


8.3.3 DIV+CSS 的 优势 


CD 符合 W3C 标准 ， 微 软 等 公司 均 为 W3C 支持 者 。 这 一 点 是 最 重要 的 ， 因 为 这 保证 
了 该 网 站 不 会 因为 将 来 网 络 应 用 的 升级 而 被 淘汰 。 

(2) 支持 浏览 器 的 向 后 兼容 ， 也 就 是 无 论 未 来 的 浏览 器 大 战 ， 胜 利 的 是 IE7 浏览 器 或 
者 是 火狐 浏览 器 ， 该 网 站 都 能 很 好 地 兼容 。 

(3) 搜索 引擎 更 加 友好 。 相 对 于 传统 的 table， 采 用 DIV+CSS 技术 的 网 页 ， 对 于 搜索 
引擎 的 收录 更 加 友好 。 

(4) 样式 的 调整 更 加 方便 。 内 容 和 样式 的 分 离 ， 使 页 面 和 样式 的 调整 变 得 更 加 方便 。 
现在 YAHOO、MSN 等 国际 门户 网 站 ， 以 及 网 易 、 新 浪 等 国内 门户 网 站 ， 和 主流 的 Web2.0 
网 站 ， 均 采用 DIV+CSS 的 框架 模式 ， 更 加 印证 了 DIV+CSS 是 大 势 所 趋 。 

(5) CSS 的 极 大 优势 表现 在 简洁 的 代码 ,对 于 一 个 大 型 网 站 来 说 , 可 以 节省 大 量 带 宽 ， 
而 且 众 所 周知 ， 搜 索引 擎 喜欢 简洁 的 代码 。 

(6) 表现 和 结构 分 离 ， 在 团队 开发 中 更 容易 分 工 合作 而 减少 相互 关联 性 。 
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8.3.4 DIV+CSS &^ zr X 


1. 行内 套用 
可 以 在 HTML 文件 内 直接 宣告 样式 。 举 例 来 说 ， 舱 入 套用 样式 可 以 嵌入 于 HTML X 
件 中 (通常 是 在 <head> 内 ) 。 


<head> 

<style type="text/css">div {background-color: #FF0000; height: 100%;} 
</style> 

</head> 

<body> 

<div></div> 

</body> 


以 上 的 HIML 会 显现 出 : 背景 颜色 是 红色 。 

2. 外 部 连接 套用 

在 这 种 方式 下 ， 所 有 的 CSS 样式 宣告 都 是 存在 另外 一 个 CSS 文件 中 。 该 文件 通常 名 
称 为 .css。 

在 HTML 文件 的 <header>..</header> 之 中 ， 我 们 将 用 以 下 的 编码 将 这 个 .css 档案 连接 
进入 : 


<link rel="style" type="text/css" href="CSSFile.css"> 


以 上 这 一 行 会 将 在 CSSFile.css 这 个 文件 内 所 宣告 的 样式 加 入 HTML 文件 内 。 

3. 汇 入 套用 

外 部 的 CSS 样式 也 可 以 被 汇 入 进 HTML 文件 。 汇 入 的 做 法 为 利用 @import 这 个 指令 。 
@import 的 语法 为 : 

<style type="text/css"><!--@import url("style.css");--»«/style» 


@import 指令 最 初 的 用 意 ， 是 为 了 能 够 针对 不 同 的 浏览 器 而 运用 不 同 的 样式 。 不 过 ， 
现在 已 经 没有 这 个 必要 。 现 在 用 @import 的 目的 ， 最 常见 的 是 要 加 入 多 个 CSS 样式 。 当 多 
个 CSS 样式 被 @import 的 方式 加 入 ， 而 不 同 CSS 样式 互相 有 冲突 时 ， 后 被 加 入 的 CSS FE 
式 有 优先 的 顺 位 (详情 请 见 CSS 串 接 ) 。 

4. 标签 内 部 套用 

还 有 一 种 嵌入 的 方式 是 直接 写 在 标签 上 的 ， 不 过 这 种 写法 有 些 限 制 ， 大 多 数 标签 都 可 
以 接受 这 种 解法 。 


<div style="color: #000000; ">M#</div> 


这 个 代码 通过 直接 嵌入 标签 的 形式 ， 使 得 标签 内 的 文字 更 改 颜色 ,而且 根 据 CSS 的 优 
先 调用 级 直接 嵌入 标签 的 写法 也 更 直接 、 更 优先 选择 调用 。 


8.3.5 DIV+CSS 布局 优点 


1. 使 页 面 载 入 得 更 快 

由 于 将 大 部 分 页 面 代码 写 在 了 CSS 当中 ,使 得 页 面体 积 容量 变 小 。 相 对 于 表格 嵌 套 的 
方式 ， DIV+CSS 将 页 面 独立 成 更 多 的 区 域 ， 在 打开 页 面 时 ， 逐 层 加 载 。 而 不 像 表 格 嵌 套 那 
样 ， 将 整个 页 面 圈 在 一 个 大 表格 里 ， 使 加 载 速度 变 得 很 慢 。 

2. 降低 流量 费用 

页 面体 积 变 小 ， 浏 览 速度 变 快 ， 这 一 点 对 于 某 些 控制 主机 流量 的 网 站 来 说 ， 具 有 最 大 
的 优势 。 

3. 修改 设计 时 更 有 效率 

由 于 使 用 了 DIV+CSS 制作 方法 ， 在 修改 页 面 的 时 候 更 加 容易 省 时 。 根 据 区 域内 容 标 
记 ， 到 CSS 里 找到 相应 的 ID， 使 得 修改 页 面 的 时 候 更 加 方便 ， 也 不 会 破坏 页 面 其 他 部 分 
的 布局 样式 。 

4. 保持 视觉 的 一 致 性 

DIV+CSS 最 重要 的 优势 之 一 是 保持 视觉 的 一 致 性 。 以 往 表格 嵌 套 的 制作 方法 , 会 使 得 
页 面 与 页 面 ， 或 者 区 域 与 区 域 之 间 的 显示 效果 出 现 偏差 。 而 使 用 DIV+CSS 的 制作 方法 ， 
将 所 有 页 面 , 或 所 有 区 域 统一 用 CSS 文件 控制 ， 就 避免 了 不 同 区 域 或 不 同 页 面 出 现 的 效果 
偏差 的 情况 。 

5. 更 好 地 被 搜索 引擎 收录 

由 于 将 大 部 分 的 HTML 代码 和 内 容 样 式 写 入 了 CSS 文件 中 ， 这 就 使 得 网 页 中 正文 音 
分 更 为 突出 明显 ， 便 于 被 搜索 引擎 采集 收录 。 

6 对 浏览 者 和 浏览 器 更 具 亲和力 

我 们 都 知道 网 站 做 出 来 是 给 浏览 者 使 用 的 ， 而 DIV+CSS 在 对 浏览 者 和 浏览 器 更 具 亲 
和 力 这 方面 有 优势 。 由 于 CSS 富 含 丰富 的 样式 ， 使 页 面 更 加 灵活 ， 它 可 以 根据 浏览 器 的 不 
同 ， 而 达到 显示 效果 的 统一 和 不 变形 。 
8.3.6 DIV+CSS 存在 问题 


尽管 DIV+CSS 具有 一 定 的 优势 , 不 过 现 阶段 CSS+DIV 网 站 建设 存在 的 问题 也 比较 明 
显 ， 主 要 表现 在 以 下 四 个 方面 。 

第 一 ， 对 于 CSS 的 高 度 依赖 使 得 网 页 设计 变 得 比较 复杂 。 相 对 于 HIML4.0 中 的 表格 
布局 (table)，CSS+DIV 尽管 不 是 高 不 可 及 ， 但 至 少 要 比 表 格 定位 复杂 得 多 ， 即 使 对 于 网 
站 设计 高 手 也 很 容易 出 现 问题 ， 更 不 要 说 初学 者 了 ， 这 在 一 定 程度 上 影响 了 XHTML 网 站 
设计 语言 的 普及 应 用 。 

第 二 ，CSS 文件 异常 将 影响 整个 网 站 的 正常 浏览 。CSS 网 站 制作 的 设计 元 素 通常 放 在 

-个 或 几 个 外 部 文件 中 ， 这 一 个 或 几 个 文件 有 可 能 相当 复杂 ， 甚 至 比较 庞大 。 如 果 CSS 文 
件 调用 出 现 异 常 ， 那 么 整个 网 站 将 变 得 惨不忍睹 。 

第 三 ， 对 于 CSS 网 站 设计 的 浏览 器 兼容 性 问题 比较 突出 。 基 于 HIML4.0 的 网 页 设计 

在 IE4.0 之 后 的 版 本 中 几乎 不 存在 浏览 器 兼容 性 问题 ， 但 CSS+DIV 设计 的 网 站 在 IE 浏览 
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器 里 面 正常 显示 的 页 面 ， 到 火狐 浏览 器 (FireFox) 中 却 可 能 面目 全 非 〈 这 也 是 为 什么 建议 
网 络 营销 人 员 使 用 火狐 浏览 器 的 原因 所 在 )。CSS+DIV 还 有 待 得 到 各 个 浏览 器 厂商 的 进 一 
步 支持 。 

第 四 ，CSS+DIV 对 搜索 引擎 优化 与 否 取决 于 网 页 设计 的 专业 水 平 而 不 是 CSS+DIV 本 
身 。CSS+DIV 网 页 设计 并 不 能 保证 网 页 对 搜索 引擎 的 优化 ， 甚 至 不 能 保证 一 定 比 HIML 
网 站 有 更 简洁 的 代码 设计 ， 何 况 搜 索引 擎 对 于 网 页 的 收录 和 排序 显然 不 是 以 是 否 采 用 表格 
1 CSS 定位 来 衡量 ， 这 就 是 为 什么 很 多 传统 表格 布局 制作 的 网 站 在 搜索 结果 中 的 排序 靠 
H 而 很 多 使 用 CSS 及 Web 标准 制作 的 网 页 排名 依然 靠 后 的 原因 。 因 为 对 于 搜索 引擎 而 
网 站 结构 、 内 容 、 相 关 网 站 链接 等 因素 始终 是 网 站 优化 最 重要 的 指标 。 


83.7 DIV+CSS 常见 错误 


1. 检查 HTML 元 素 是 否 有 拼写 错误 、 是 否 忘记 结束 标记 

即使 是 老手 也 经 常会 弄 错 div MK A. AY VASA Dreamweaver 的 验证 功能 检查 一 下 
有 无 错误 。 

2. 检查 CSS 是 否 正 确 

检查 一 下 有 无 拼写 错误 、 是 否 忘 记 结 尾 的 “} ”等 。 可 以 利用 CleanCSS 来 检查 CSS 
的 拼写 错误 。CleanCSS 本 是 为 CSS 减肥 而 设计 的 工具 ， 但 也 能 检查 出 拼写 错误 。 

3. 确定 错误 发 生 的 位 置 

如 果 错 误 影响 了 整体 布局 ， 则 可 以 逐个 删除 div 块 ， 直 到 删除 某 个 div 块 后 显示 恢复 
正常 ， 即 可 确定 错误 发 生 的 位 置 。 

4. 是 否 重 设 了 默认 的 样式 

某 些 属性 如 margin、padding 等 ， 不 同 浏览 器 会 有 不 同 的 解释 。 因 此 最 好 在 开发 前 首 
先 将 全 体 的 margin, padding 设置 为 0， 列表 样式 设置 为 none 等 。 

5. 是 否 忘记 了 写 DID 

如 果 无 论 怎 样 调整 ， 不 同 浏览 器 的 显示 结果 还 是 不 一 样 ， 那 么 可 以 检查 一 下 页 面 开头 
是 不 是 态 了 写 下 面 这 行 DTD: 
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uh 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 


8.3.8 DIV+CSS 常用 工具 


(1) Notepad 记事 本 : 程序 小 ， 可 随时 手工 编辑 ， 垃 圾 代码 少 ， 不 能 可 视 化 预览 。 

(2) Sublime: 比 记事 本 可 视 化 效果 好 。 

(3) Dreamweaver: 老牌 网 页 编辑 工具 ， 功 能 全 ， 程 序 比较 大 ， 但 对 DIV+CSS 可 视 化 
支持 程度 不 太 友好 。 

(4) editplus: 应 该 是 升级 版 的 记事 本 工具 ， 代 码 编辑 有 颜色 提示 。 

(5) Golive: KRHA Dreamweaver 的 产品 。 

(6) Topstyle: 功能 相当 多 , 附 有 CSS 码 检查 功能 , 减少 写 错 的 机 会 。 尤 其 是 它 的 HELP 
文件 中 详细 的 CSS 指令 介绍 ， 很 适 于 用 作 参 考 文件 和 CSS 的 初学 者 。 


上 mw PP 一 


-如何 定义 表单 ? 


表单 有 哪些 常见 属性 ? 


. HTML 视频 和 音频 都 可 以 使 用 哪些 标签 ? 
. 什么 是 DIV+CSS? 这 种 模式 有 什么 好 处 ? 


PALER 
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HTML 代码 规范 的 目的 是 使 HTML 代码 风格 保持 一 致 ， 容易 被 理解 和 被 维护 。 如 果 自 
己 没 有 这 种 习惯 ， 请 好 好 选择 IDE， 别 再 用 “文本 编辑 器 ” 尽 可 能 地 选择 代码 可 视 化 程度 
高 ， 代 码 提示 功能 健全 的 IDE， 例 如 : Dreamweaver. 


94 代码 风格 


9.1.1 缩 进 与 换行 


使 用 四 个 空格 作为 一 个 缩 进 层级 ， 不 允许 使 用 两 个 空格 或 tab 字符 。 
示例 : 
<ul> 

«li»first«/li» 


«li»second«/li» 
«/ul» 


。 建议 : 

每 行 不 得 超过 120 个 字符 。 

解释 : 

过 长 的 代码 不 容易 阅读 和 维护 。 但 是 考虑 到 HTML 的 特殊 性 , 不 做 硬性 要 求 , sublime, 
phpstorm、wenstorm 等 都 有 标尺 功能 。 


912 命名 


class 必须 单词 全 字母 小 写 ， 单 词 间 以 “-” 分 隔 。 
class 必须 代表 相应 模块 或 部 件 的 内 容 或 功能 ， 不 得 以 样式 信息 进行 命名 。 
示例 : 





<!-- good --> 

<div class="sidebar"></div> 
<!-= bad ==> 

<div class="left"></div> 


TER id 必须 保证 页 面 唯一 。 


解释 : 

同一 个 页 面 中 ， 不 同 的 元 素 包 含 相同 的 id, KAA id 的 属性 含义 。 并 且 使 用 
document.getElementByld 时 ， 可 能 导致 难以 追查 的 问题 。 

。 建议 : 

id 建议 单词 全 字母 小 写 ， 单 词 间 以 “-” 分 隔 。 同 项 目 必 须 保 持 风格 一 致 。 

id、class 命名 ， 在 避免 冲突 并 描述 清楚 的 前 提 下 尽 可 能 短 。 

示例 : 








<!-- good --> 

<div id="nav"></div> 

<!-- bad --» 

«div id="navigation"></div> 


<!-- good --> 

<p class="comment"></p> 
<!-- bad --» 

<p class="com"></p> 


<!-- good --> 
<span class="author"></span> 
<!-- bad --> 


<span class="red"></span> 


同一 页 面 ， 应 避免 使 用 相同 的 name 与 id. 

解释 : 

IE 浏览 器 会 混淆 元 素 的 id 和 name 属性 ， document.getElementById 可 能 获得 不 期 
望 的 元 素 。 所 以 在 对 元 素 的 id 与 name 属性 的 命名 需要 非常 小 心 。 一 个 比较 好 的 方法 是 ， 
为 id 和 name 使 用 不 同 的 命名 法 。 

示例 : 


<input name="foo"> 

<div id="foo"></div> 

<script> 

// IE6 将 显示 INPUT 

alert (document .getElementById('foo') .tagName) ; 


</script> 
9.1.3 标签 
(1) 标签 名 必须 使 用 小 写字 母 。 
示例 : 
<!-- good --» 第 
<p>Hello StyleGuide!</p> 9 


= 
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<!—— bad, -=--> 
<P>Hello StyleGuide!</P> 


(2) 对 于 无 须 自 闭合 的 标签 ， 不 允许 自 闭合 。 





解释 : 

常见 无 须 自 闭合 标签 有 input、br、img、hr 等 。 
示例 : 

<!-- good -=> 


<input type="text" name-"title"» 


<!-- bad =--> 
<input type="text" name-"title" /> 


(3) 对 HIMLS 中 规定 允许 省 略 的 闭合 标签 ， 不 允许 省 略 闭合 标签 。 
示例 : 


<!-- good --> 

<ul> 
«li»first«/li» 
«li»second«/li» 

«/ul» 


<!-- bad --> 
<ul> 
«is»first 
«li»second 
«/ul» 


(4) 标签 使 用 必须 符合 标签 嵌 套 规则 。 

解释 : 

比如 div 不 得 置 于 p 中 ，tbody 必须 置 于 table 中 。 
示例 : 


<!-- good ==> 
«div»«hl»«span»«/span»«/hl»«/div» 
«a href=""><span></span></a> 


<!-- bad ==> 

<span><div></div></span> 
<p><div></div></p> 

<hl><div></div></h1> 

<h6><div></div></h6é> 

<a href-"a.html"»«a href-"a.html"»«/a»«/a» 


= 建议 : 
HTML 标签 的 使 用 应 该 遵循 标签 的 语义 。 


解释 : 
下 面 是 常见 标签 语义 : 
. p— Bk: 


* hl,h2,h3,h4,h5,h6 一 一 层级 标题 ; 
e strong,em 一 一 强调 ; 

. ins 一 一 插入 ; 

© del 一 一 删除 ; 

e abbr 一 一 缩写 ; 

© code 一 一 代码 标识 ; 

。 cite 一 一 引述 来 源 作品 的 标题 ; 

。 gq 一 一 3| 用 ; 

* blockquote 一 一 一 段 或 长 篇 引用 ; 
* 一 一 无 序列 表 ; 

© ol 一 一 有 序列 表 ; 

* dl,dt,dd 一 一 定义 列表 。 

示例 : 

<!-- good --> 

<p>Esprima serves as an important <strong>building block</strong> for some 
JavaScript language tools.</p> 


<!-- bad --> 
<div>Esprima serves as an important <span class="strong">building block 
</span> for some JavaScript language tools.</div> 


。 建议 : 

CSS 在 可 以 实现 相同 需求 的 情况 下 不 得 使 用 表格 进行 布局 。 

解释 : 

在 兼容 性 允许 的 情况 下 ， 应 尽量 保持 语义 正确 性 。 对 网 格 对 齐 和 拉 伸 性 有 严格 要 求 的 
场景 允许 例外 ， 如 多 列 复杂 表单 。 

- 建议 : 

标签 的 使 用 应 尽量 简洁 ， 减 少 不 必 要 的 标签 。 

示例 : 


<!-- good --» 


«img class-"avatar" src="image.png"> 


€t-- bad ==> 
<span class-"avatar"» 第 
<img src="image.png"> 9 
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</span> 


9.14 属性 
» 建议 : 
属性 名 必须 使 用 小 写字 母 。 
示例 : 


<!-- good --» 
<table cellspacing="0">...</table> 


<!-- bad --> 

<table cellSpacing="0">...</table> 
。 建议 : 

属性 值 必须 用 双 引 号 包围 。 

解释 : 

不 允许 使 用 单 引号 ， 不 允许 不 使 用 引号 。 
示例 : 

<!-- good --> 


<script src="esl.js"></script> 


<!-- bad --> 
<script src='esl.js'></script> 
<script src=esl.js></script> 


。 建议 : 

布尔 类 型 的 属性 ， 建 议 不 添加 属性 值 。 
示例 : 

<!-- good --> 


<input type="text" disabled> 
<input type="checkbox" value-"1" checked» 


<!-- bad ==> 
<input type="text" disabled="disabled"> 
<input type="checkbox" value-"1" checked="checked"> 


*. 建议 : 

自 定义 属性 建议 以 “xxx- ”为 前 级 ， 推 荐 使 用 “data-”。 
解释 : 

使 用 前 绥 有 助 于 区 分 自 定义 属性 和 标准 定义 的 属性 。 
示例 : 


«ol data-ui-type-"Select"»«/ol» 


9.2 通 用 


9.2.4 DOCTYPE 


» 建议 : 
使 用 HTMLS 的 doctype 来 启用 标准 模式 ， 建 议 使 用 大 写 的 DOCTYPE. 
示例 : 





<!DOCTYPE html» 


。 建议 : 

启用 IE Edge 和 Chrome Frame 模式 。 

示例 : 

<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> 
。 建议 : 

在 <html> 标 签 上 设置 正确 的 lang 属性 。 

解释 : 


有 助 于 提高 页 面 的 可 访问 性 ， 如 : 让 语音 合成 工具 确定 其 所 应 该 采用 的 发 音 ， 令 翻译 
工具 确定 其 翻译 语言 等 。 
示例 : 


<html lang="zh-CN"> 


。 建议 : 
开启 双核 浏览 器 的 webkit 内 核 进行 演 染 。 
示例 : 


<meta name="renderer" content="webkit"> 

e 建议 : 

开启 浏览 器 的 DNS 预 获 取 。 

解释 : 

减少 DNS 请 求 次 数 、 对 DNS 进行 预 获取 。 

示例 : 

<link rel="dns-prefetch" href="//global.zuzuche.com/"> 


<link rel-"dns-prefetch" href-"//imgcdnl.zuzuche.com/"» 


<link rel-"dns-prefetch" href-"//qiniucdn.com/"» 


9.2.2 编码 
第 


页 面 必须 使 用 精简 形式 ， 明 确 指 定 字 符 编 码 。 指 定 字符 编码 的 meta 必须 是 head 的 | 9 
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第 一 个 直接 子 元 素 。 
示例 : 
<html lang="zh-CN"> 
<head> 


<meta charset="UTF-8"> 


<body> 
</body> 
</html> 


。 建议 : 

HTML 文件 使 用 无 BOM 的 UTF-8 编码 。 

解释 : 

UTF-8 编码 具有 更 广泛 的 适应 性 。BOM 在 使 用 程序 或 工具 处 理 文件 时 ， 可 能 造成 不 
必要 的 干扰 。 
9.2.3 CSS 和 JavaScript 引入 

(1) 引入 CSS 时 必须 指明 rel="stylesheet". 





示例 : 

<link rel="stylesheet" src="page.css"> 

。 建议 : 

引入 CSS 和 JavaScript 时 无 须 指明 type 属性 。 

解释 : 

text/CSS 和 text/JavaScript 是 type 的 默认 值 。 

。 建议 : 

展现 定义 放置 于 外 部 CSS 中 ， 行 为 定义 放置 于 外 部 JavaScript 中 。 

解释 : 

结构 -样式 -行为 的 代码 分 离 ， 对 于 提高 代码 的 可 阅读 性 和 维护 性 都 有 好 处 。 
- 建议 : 

在 head 中 引入 页 面 需要 的 所 有 CSS 资源 。 

解释 : 

在 页 面 渔 染 的 过 程 中 ， 新 的 CSS 可 能 导致 元 素 的 样式 重新 计算 和 绘制 ， 页 面 闪烁 。 
- 建议 : 

JavaScript 应 当 放 在 页 面 末尾 ， 或 采用 异步 加 载 。 

解释 : 


将 script 放 在 页 面 中 间 将 阻 断 页 面 的 泻 染 。 出 于 性 能 方面 的 考虑 ， 如 非 必要 ， 请 遵守 
此 条 建议 。 





示例 : 


<body> 

«!-- a lot of elements --» 

<script src-"init-behavior.js"»«/script» 
</body> 


QD 引用 静态 资源 的 URL 协议 部 分 与 页 面相 同 ， 建 议 省 略 协议 前 缀 。 
示例 : 


<script src="//global.zuzuche.com/assets/js/gallery/jquery/1.11.2/jquery.js"> 
</script> 


9.3 Head 


。 页 面 必 须 包 含 title 标签 声明 标题 。 
。 title 必须 作为 head 的 直接 子 元 素 ， 并 紧 随 <link rel="dns-prefetch"> 声明 之 后 。 
解释 : 
title 中 如 果 包含 ASCI 之 外 的 字符 ,浏览 器 需要 知道 字符 编码 类 型 才能 进行 解码 ， 否 
则 可 能 导致 乱码 。 
示例 : 
<head> 
<meta charset="UTF-8"> 
<link rel="dns-prefetch" href="//global.zuzuche.com/"> 
<link rel-"dns-prefetch" href="//imgcdn1.zuzuche.com/"> 
<link rel="dns-prefetch" href="//qiniucdn.com/"> 
<title> 页 面 标题 </title> 
</head> 


9.4 图 片 


禁止 img 的 src 取 值 为 室 。 延 迟 加 载 的 图 片 也 要 增加 默认 的 sreo 

解释 H 

src 取 值 为 空 ， 会 导致 部 分 浏览 器 重新 加 载 一 次 当前 页 面 ， 参 考 ; https;//developer. 
yahoo.com/performance/rules.htmlZemptysrc . 


. 建议 : 

避免 为 img 添加 不 必要 的 title 属性 。 

解释 : 

多 余 的 ute 影响 看 图 体验 ， 并 且 增 加 了 页 面 尺寸 。 

. 建议 : 第 

为 重要 图 片 添加 alt 属性 。 5 
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pr 


解释 : 

可 以 提高 图 片 加 载 失 败 时 的 用 户 体验 。 

€ 建议 : 

添加 width 和 height 属性 ， 以 避免 页 面 拌 动 。 

。 建议 : 

有 下 载 需求 的 图 片 采用 img 标签 实现 ， 无 下 载 需求 的 图 片 采用 CSS 背景 图 实现 。 
解释 : 


产品 LOGO、 用 户头 像 、 用 户 产生 的 图 片 等 有 潜在 下 载 需求 的 图 片 ， 以 img 形式 实 
能 方便 用 户 下载 。 无 下 载 需 求 的 图 片 ， 比 如 : icon、 背 景 、 代 码 使 用 的 图 片 等 ， 尽 可 


能 采用 CSS 背景 图 实现 。 


95 EX F 


e 建议 : 

有 文本 标题 的 控件 必须 使 用 label 标签 将 其 与 其 标题 相关 联 。 

解释 : 

实现 这 个 效果 有 两 种 方式 : 将 控件 置 于 label AY. label 的 for 属性 指向 控件 的 id. 


推荐 使 用 第 一 种 ， 减 少 不 必 要 的 id。 如 果 DOM 结构 不 允许 直接 嵌 套 ， 则 应 使 用 第 二 种 。 


B 


示例 : 


<label><input type="checkbox" name="confirm" value-"on"» 我 已 确认 上 述 条 款 
</label> 


<label for="username"> 用 户 名 : </label> 
<input type-"textbox" name-"username" id="username"> 


9.6 按钮 
。 建 议 : 
使 用 button 元 素 时 必须 指明 type 属性 值 。 
解释 : 





button 元 素 的 默认 type 为 submit， 如 果 被 置 于 form 元 素 中 ， 单 击 后 将 导致 表单 提 





。 为 方便 理解 显示 区 分 其 作用 ， 必 须 给 出 type 属性 。 


示例 : 

«button type="submit"> 提 交 </button> 
<button type="button"> 取 消 </button> 
建议 : 

尽量 不 要 使 用 按钮 类 元 素 的 name 属性 。 


解释 : 
由 于 浏览 器 兼容 性 问题 ， 使 用 按钮 的 name 属性 会 带 来 许多 难以 发 现 的 问题 。 具 体 情 


况 可 参考 此 文 。 
。 建议 : 
负责 主要 功能 的 按钮 在 DOM 中 的 顺序 应 靠 前 。 
解释 : 


负责 主要 功能 的 按钮 应 相对 靠 前 , 以 提高 可 访问 性 。 如 果 在 CSS 中 指定 了 float: right 
则 可 能 导致 视觉 上 主 按钮 在 前 ， 而 DOM 中 主 按钮 靠 后 的 情况 。 
示例 : 


<!-- good --> 
<style> 
-buttons .button-group { 
float: right; 
} 
</style> 


<div class="buttons"> 
<div class="button-group"> 
«button type="submit">$22%</button> 
<button type="button"> 取 消 </button> 
</div> 
</div> 


<!-- bad -=> 

<style> 

-buttons button { 
float: right; 

H 

«/style» 


«div class="buttons"> 
<button type="button"> 取 消 </button> 
«button type="submit"> 提 交 </button> 
</div> 


= 建议 : 
当 使 用 JavaScript 进行 表单 提交 时 ， 如 果 条 件 允 许 ， 应 使 原生 提交 功能 正常 工作 。 
解释 : 
当 浏 览 器 JavaScript 运行 错误 或 关闭 JavaScript 时 ， 提 交 功 能 将 无 法 工作 。 如 果 正 确 指 | 第 
定 了 form 元 素 的 action 属性 和 表单 控件 的 name 属性 时 ， 则 提交 仍 可 继续 进行 。 9 
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示例 : 


<form action-"/login" method="post"> 
<p><input name="username" type="text" placeholder=" 用 户 名 "></p> 
<p><input name="password" type="password" placeholder=" 密 码 "></p> 
</form> 


。 建议 : 

在 针对 移动 设备 开发 的 页 面 时 ， 根 据 内 容 类 型 指定 输入 框 的 type 属性 。 
解释 : 

根据 内 容 类 型 指定 输入 框 类 型 ， 能 获得 友好 的 输入 体验 。 

示例 : 

<input type="date"> 

<input type="tel"> 


<input type="number"> 
<input type="number" pattern="\d*"> 


9.7 ”模板 中 的 HTML 


。 建议 : 
模板 代码 的 缩 进 优先 保证 HTML 代码 的 缩 进 规则 。 
示例 : 
<!-- good --> 
<!-- IF is display -=> 
«div» 
«ul» 
«!-- BEGIN item list --> 
<1i>{name}<li> 
<!-- END item list --> 
«/ul» 
«/div» 
«!-- ENDIF item list 一 一 > 
<!-- bad --> 
«!-- IF is display --> 
«div» 
«ul» 
«!-- BEGIN item list =--> 


«li»[($item.name)«li» 
«!-- END item list 一 一 > 
«/ul» 
«/div» 


«!-- ENDIF item list --» 


€ 建议 : 

模板 代码 应 以 保证 HIML 单个 标签 语法 的 正确 性 为 基本 原则 。 
示例 : 

<!-- good --> 


«li class-"«!-- IF selected --> selected«!-- ENDIF selected --»"»(type name) 
</li> 


<!-- bad --» 
<li <!-- IF selected --> class="focus"<!-- ENDIF selected -->>{type_name} 
</li> 
。 建议 : 
模板 代码 应 以 保证 结束 符 的 闭合 名 。 
示例 : 
<!-- good ==> 
<!-- IF is display ==> 
«div» 
«!-- BEGIN item list --» 
«ul» 
«!-- BEGIN package list --> 
«li» 
«span» (name) : </span><span>¥ (unit price])«/span» 
«li» 
<!-- END package list --> 
«/ul» 
<!-- END item list --> 
«/div» 
<!-- ENDIF is display --> 
<!-- bad ==> 
<!-- IF is_display --> 
<div> 
«!-- BEGIN item list --> 
«ul» 
«!-- BEGIN package list --» 
xu 
«span» (name] : «/span»«span»Y (unit price]«/span» 
<li> 
<!-- END ==> 
</ul> 
<!-- END --> 
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«/div» 
«!-- ENDIF --» 


€ 建议 : 

在 循环 处 理 模 板 数据 构造 表格 时 ， 若 要 求 每 行 输出 固定 的 个 数 ， 建 议 先 将 数据 分 组 ， 
之 后 再 循环 和 输出， 模板 只 是 做 数据 展示 ， 别 加 插 太 多 业务 罗 辑 〈 其 他 数据 构造 同 理 )。 

示例 : 


<!-- good --> 
<table> 
«!-- BEGIN item list --> 
«tr» 
<!-- BEGIN package list --> 
«td» 
«span» (name) : «/span»«span» Y (unit price)«/span» 
«/td» 
<!-- END package list --> 
«tr» 
<!-- END item list --> 
«/table» 


<!-- bad --» 
«table» 
«tr» 
«!-- BEGIN item list --> 
«td» 
«span» (name) : «/span»«span» Y (unit price)«/span» 
«/td» 
<!-- IF id-"5" --> 
</tr> 
<tr> 
<!-- ENDIF id --> 
<!-- END item list --> 
</tr> 
</table> 


<!-- good --> 
<table> 
«!-- BEGIN item list --» 
«tr» 
«!-- BEGIN package list --» 
«td» 
«span» [name] : «/span»«span» Y {price}</span> 
«/td» 
«!-- END package list --» 
«tr» 


«!-- END item list --» 


</table> 
<!-—-— bad --> 
<table> 
«!-- BEGIN item list 一 -> 
«tr» 
«td» 


«span» (name) : </span> 
<!-- IF type-"unit" --> 
«span» Y (unit price)«/span» 
<!-- ELSEIF type-"total" --> 
<span> ¥ {total_price}</span> 
<!-- ENDIF type --> 
</td> 

</tr> 

«!-- END item list --> 

«/tr» 

«/table» 


9.8 模板 使 用 


使 用 模板 是 HTML 开发 中 经 常用 到 的 技巧 ， 因 为 许多 优秀 的 模板 能 够 大 大 减少 搭建 
HTML 和 设计 CSS 的 时 间 。 如 何 学 会 规范 地 使 用 模板 不 仅 会 加 快 开发 进度 ， 也 会 大 大 提高 
项 目的 可 维护 性 。 

9.8.1 为 什么 使 用 HTML 模板 


使 用 后 台 开 发 语言 的 人 都 很 了 解 语言 的 动态 性 给 开发 带 来 的 好 处 ， 如 php, aspx, jsp 
页 面 都 可 以 直接 使 用 相应 的 语法 和 变量 ， 输 出 的 事 就 交 给 解释 器 或 编译 器 了 ， 用 起 来 方便 
快捷 ， 但 需要 额外 的 解释 工作 。 

例如 : php 模板 ， 需 要 php 解析 后 ， 再 由 apache 输出 ; aspx 需要 专用 dll 解析 后 ， 由 
IIS 输出 ; jsp 需要 虚拟 机 解析 后 ， 由 tomcat 输出 。 

总 之 ， 就 是 Web 服务 器 无 法 直接 识别 并 输出 这 些 动态 语言 的 文件 格式 ， 但 对 HTML 
都 直接 识别 输出 给 浏览 器 。 如 果 直 接 用 HIML 来 做 网 页 内 容 的 展示 , 就 少 了 一 层 解析 工作 。 
从 客户 端 发 起 请 求 到 网 页 输出 , 不 可 置疑 HTML 一 定 是 最 快 的， 这 就 是 为 什么 大 并 发 网 站 
都 会 将 动态 内 容 静 态 化 的 一 个 重要 原因 。 

HTML 有 打开 效率 高 的 先天 优势 ， 但 也 有 一 个 先天 缺陷 不 支持 动态 语言 ， 这 也 是 
HTML 模板 语言 出 现 的 原因 ， 让 网 站 即 HTML 高 效 ， 又 享受 内 容 的 动态 化 。 
9.8.2 ”如 何 获取 HTML 模板 


使 用 搜索 引擎 搜索 HTML 模板 ， 常 见 的 模板 网 站 例如 模板 之 家 ， 站 长 素材 等 。 
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l. 请 简 述 HTML 缩 进 与 换行 的 规范 。 
2. HTML 按钮 代码 规范 的 注意 事项 有 哪些 ? 
3. 使 用 HTML 模板 最 大 的 好 处 是 什么 ? 











#108 HTML 样 例 





接 下 来 会 通过 分 析 一 个 实例 ， 来 进一步 说 明 HTML 搭建 网 站 时 的 使 用 。 

下 面 通过 使 用 Dreamweaver 模板 建立 一 个 简历 模板 ， 笔 者 会 逐步 地 分 析 下 面 的 HTML 
源码 ， 来 学 习 规范 的 HTML 编码 过 程 ， 见 代码 10-1. 

代码 10-1 


<!DOCTYPE html» 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

«meta name-"viewport" content-"width-device-width, initial-scale=1"> 
<title>Portfolio</title> 


<!-- Bootstrap --> 
<link rel="stylesheet" href="../../../../{t#i45/css/bootstrap.css"> 


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media 
queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
<script src-"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"» 
«/script» 
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> 
</script> 
<! [endif]--» 
</head> 
<body> 


<div class="container"> 
<hr> 
<div class="row"> 
«div class-"col-xs-6"» 
«hl»John Doe</h1> 
«/div» 
«div class 





"col-xs-6"» 





<p class-"text-right"»«a href="">Download my Resume <span class= 
"glyphicon glyphicon-download-alt" aria-hidden-"true"»«/span»«/a»«/p» 
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</div> 
</div> 
<hr> 
<div class="row"> 
«div class-"col-xs-7"» 
«div class="media"> 
<div class-"media-left"» «a href="#"> «img class-"media-object 
img-rounded" src="../../../../{4/images/115X115.gif" alt-"..."» 
«/a» «/div» 
«div class-"media-body"» 
<h2 class="media-heading">Web Developer</h2> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, 
neque, in, accusamus optio architecto debitis dolor animi placeat 
ut ab corporis laboriosam itaque. Nobis, sapiente quo dolorum ut 
quod possimus doloremque suscipit ad doloribus quam dolor </div> 
</div> 
</div> 
<div class="col-xs-5 well"> 
<div class="row"> 
<div class="col-lg-6"> 
<h4><span class="glyphicon glyphicon-phone" aria-hidden="true"> 
</span> : 123-456-7890</h4> 
</div> 
<div class-"col-1g-6"» 
<h4><span class="glyphicon glyphicon-envelope" aria-hidden="true"> 
</span> : john@example.com</h4> 
</div> 
</div> 
<div class="row"> 
<div class-"col-1g-6"» 
<h4><span class="glyphicon glyphicon-map-marker" aria-hidden-"true"» 
</span> : San Francisco, CA</h4> 
</div> 
<div class="col-lg-6"> 
<h4><span class="glyphicon glyphicon-phone" aria-hidden-"true"» 
</span> : 123-456-7890«/h4» 
«/div» 
«/div» 
«/div» 
«/div» 
<hr> 
<div class="row"> 
«div class-"col-sm-8 col-1g-7"» 
<h2>Education</h2> 
<hr> 


<div class="row"> 
<div class-"col-xs-6"»«h4»College of Web Design</h4></div> 
<div class-"col-xs-6"» 
<h4 class-"text-right"»«span class="glyphicon glyphicon-calendar" 
aria-hidden="true"></span> Jan 2002 - Dec 2006</h4> 
</div> 
</div> 
<h4><span class="label label-default">Bachelors</span></h4> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, 
recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod 
repellat laboriosam soluta laudantium amet dicta non ratione distinctio 
nihil dignissimos esse!</p> 
<div class="row"> 
<div class-"col-xs-6"» 
<h4>University of Web Design</h4> 





</div> 
<div class="col-xs-6"> 
<h4 class="text-right"><span class="glyphicon glyphicon-calendar" 
aria-hidden="true"></span> Jan 2006 - Dec 2008</h4> 
</div> 
</div> 


<h4><span class-"label label-default">Masters</span></h4> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, 

recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod 

repellat laboriosam soluta laudantium amet dicta non ratione distinctio 

nihil dignissimos esse!</p> 

</div> 
<div class-"col-sm-4 col-lg-5"> 

<h2>Skill Set</h2> 

<hr> 

<!-- Green Progress Bar --> 

<div class="progress"> 
«div class-"progress-bar progress-bar-success" role="progressbar" 
aria-valuenow-"85" aria-valuemin-"0" aria-valuemax-"100" style- 
"width: 85$"» HTML</div> 

«/div» 

<!-- Blue Progress Bar --> 

«div class="progress"> 





«div class-"progress-bar progress-bar-success" role-"progressbar" 
aria-valuenow-"80" aria-valuemin="0" aria-valuemax-"100" style= 
"width: 80$"» CSS«/div» 

«/div» 

<!-- Yellow Progress Bar 一 -> 

«div class="progress"> 


«div class-"progress-bar progress-bar-success" role-"progressbar" 
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aria-valuenow-"70" aria-valuemin="0" aria-valuemax-"100" style= 
"width: 70%"> JAVASCRIPT</div> 
</div> 
<!-- Red Progress Bar --> 
<div class="progress"> 
<div class-"progress-bar progress-bar-info" role-"progressbar" 
aria-valuenow-"60" aria-valuemin="0" aria-valuemax-"100" style= 
"width: 60$"» PHP</div> 
«/div» 
<div class="progress"> 
<div class-"progress-bar progress-bar-warning" role-"progressbar" 
aria-valuenow-"55" aria-valuemin-"0" aria-valuemax-"100" style-"width: 
55$"» WORDPRESS</div> 
«/div» 
<div class="progress"> 





<div class="progress-bar progress-bar-danger" role="progressbar" 


" aria-valuemax-"100" style="width: 





aria-valuenow-"50" aria-valuemin- 
50$"» PHOTOSHOP«/div» 
«/div» 
<div class="progress"> 
<div class="progress-bar progress-bar-danger" role="progressbar" 
aria-valuenow-"50" aria-valuemin-"0" aria-valuemax-"100" style="width: 
50$"» ILLUSTRATOR</div> 
«/div» 
«/div» 
«/div» 
«hr» 
<h2>Work Experience</h2> 
<hr> 
<div class="row"> 
<div class="col-1lg-6"> 
<div class="row"> 
<div class="col-xs-5"> 
<h4>ABC Corp.</h4> 
</div> 
<div class-"col-xs-5"» 
<h4 class-"text-right"»«span class="glyphicon glyphicon-calendar" 
aria-hidden="true"></span> Jan 2002 - Dec 2006</h4> 
</div> 
</div> 
<h4><span class-"label label-default">Web Developer</span></h4> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, 
recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod 
repellat laboriosam soluta laudantium amet dicta non ratione distinctio 


nihil dignissimos esse!</p> 


<ul> 
<li>Lorem ipsum dolor sit amet.</li> 
<li>Lorem ipsum dolor sit amet, consectetur.</li> 
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li> 
</ul> 
</div> 
«div class="col-lg-6"> 
<div class="row"> 
<div class="col-xs-5"> 
<h4>XYZ Corp.</h4> 
</div> 
<div class="col-xs-6"> 
<h4 class="text-right"><span class="glyphicon glyphicon-calendar" 
aria-hidden="true"></span> Jan 2002 - Dec 2006</h4> 
</div> 
</div> 
<h4><span class-"label label-default">Senior Web Developer</span></h4> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, 
recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod 
repellat laboriosam soluta laudantium amet dicta non ratione distinctio 
nihil dignissimos esse!</p> 
<ul> 
<li>Lorem ipsum dolor sit amet.«/li» 
<li>Lorem ipsum dolor sit amet, consectetur.«/li» 
Xli»Lorem ipsum dolor sit amet, consectetur adipisicing.«/li» 
«/ul» 
«/div» 
«/div» 
«hr» 
<h2>Portfolio</h2> 
<hr> 
<div class="container"> 
<div class="row"> 
<div class-"col-lg-4 col-sm-6 col-xs-6"»«img src="../../../../ 代 码 
/images/300X200.gif" alt=""><hr class="hidden-lg"></div> 


<div class-"col-lg-4 col-sm-6 col-xs-6"»«img src="../../../../ 代 码 
/images/300X200.gif" alt=""><hr class-"hidden-lg"»«/div» 
«div class-"col-lg-4 col-sm-6 col-xs-6"»«img src-"../../../../fXfj 
/images/300X200.gif" alt=""></div> 
«div class-"col-lg-4 col-sm-6 col-xs-6 hidden-lg"»«img src-"../.. 
/../../fXfid/images/300X200.gif" alt=""></div> 
</div> 
<hr> 
<div class="row"> 第 
<div class-"col-lg-4 col-sm-6 col-xs-6"»«img src="../../../../ 代 码 10 
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/images/300X200.gif" alt 





"><hr class="hidden-lg"></div> 








«div class-"col-lg-4 col-sm-6 col-xs-6"»«img src="../../../../ 代 码 
/images/300X200.gif" alt=""><hr class-"hidden-lg"»«/div» 
«div class-"col-lg-4 col-sm-6 col-xs-6"»«img src-"../../../../4X3 


/images/300X200.gif" alt=""></div> 


«div class-"col-1lg-4 col-sm-6 col-xs-6 hidden-lg"»«img src-"../../../../ 
代码 /images/300X200.gif" alt=""></div> 


</div> 
</div> 
<hr> 


<h2>Contact</h2> 


<hr> 
</div> 


<div class="container"> 
<div class="row"> 
<div class="col-lg-offset-3 col-xs-12 col-lg-6"> 


<div class= 


<div 


<div class= 


umbotron"> 
class="row text-center"> 
text-center col-xs-12 col-sm-12 col-md-12 col-lg-12"> </div> 








<div class-"text-center col-lg-12"> 
<!-- CONTACT FORM https://github.com/jonmbake/bootstrap3-contact- 
form --> 
<form role-"form" id="feedbackForm" class-"text-center"» 


<div class="form-group"> 
<label for="name">Name</label> 
<input type="text" class="form-control" id="name" name="name" 
placeholder="Name"> 
<span class="help-block" style="display: none;">Please enter 
your name.</span></div> 

<div class="form-group"> 
<label for="email">E-Mail</label> 
<input type="email" class="form-control" id="email" name= 
"email" placeholder="Email Address"> 
<span class="help-block" style="display: none;">Please enter 





a valid e-mail address.</span></div> 
<div class="form-group"> 
<label for="message">Message</label> 
10" cols-"100" class-"form-control" id-"message" 





<textarea rows: 
name="message" placeholder="Message"></textarea> 





<span class-"help-block" style-"display: none;">Please enter 
a message.</span></div> 

<span class="help-block" style="display: none;">Please enter a 

the security code.</span> 

<button type="submit" id-"feedbackSubmit" class="btn btn-primary 


btn-lg" style=" margin-top: 10px;"> Send</button> 


</form> 


«!-- END CONTACT FORM --» 


«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
«hr» 


«footer class-"text-center"» 


«div class="container"> 


<div class="row"> 


«div class="col-xs-12"> 


<p>Copyright © MyWebsite. All rights reserved.</p> 


</div> 
</div> 
</div> 
</footer> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="../../../../4t#5/js/jquery-1.11.3.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as 


needed --» 


<script src="../../../../{€#5/js/bootstrap.js"></script> 


</body> 
</html> 


FOIE ARH, AY A AC HLT SE EU Si nr de A RR fai, Gir S head 信息 ， 两 个 
container, —^ footer 和 一 些 script 引用 。 网 站 代码 结构 如 图 10-1 所 示 。 


<!DOCTYPE html> 
<html gz"en"» 

» <head> «meta charset- 
<bo 


> <div class="container"> <h... 
> <div class="container"> <d... 

<hr> 
» <footer class-"text-center... 


../ 38/3 


uery-1.11.3.min.j 


. -/RB/js/bootstrap.js">< 


首先 看 到 <head> 标 签 部 分 ， 


文字 编码 ， 一 般 设置 成 utf-8 可 以 适应 各 类 平台 。 











图 10-1 网 站 代码 结构 

















面 规定 了 许多 meta 属性 ， 例 如 charset 表示 当前 使 用 的 
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<head> 
«meta charset-"utf-8"» 


从 上 述 代码 可 以 发 现 很 多 类 似 下 面 这 样 的 class， 这 些 都 是 bootstrap 定义 好 的 css 类 ， 
可 以 适应 各 类 界面 , 并 且 其 实现 是 十 分 精美 高 效 的 。 因此 , 在 开发 中 尽 可 能 地 多 用 这 类 “ 标 
准 ” 控 件 。 


<div class-"col-xs-6"» 


显示 结果 如 图 10-2 所 示 。 








ene m le [if User sf roc /Desktoo/ fie HTML B/Codeícode-14/14-1. tmi. e o & ð 
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Download my Resume d. 

John Doe 
Web Developer 
Lorem ipsum cosor sit amet, consectetr adiicing eit. Aiquam. neque, in, Q : 123-456-7890 Z: john@example.com 
ecm mane oiio erchlecio daba ocr onmi placet ab corpora lodos 
Haque, Nobis sapients cuo dolorum u! quod possimus coloremque suscipit ad O :San Francisco, CA Q : 123-466-7800 
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Education Skill Set 
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University of Web Design ivan 2006 - Doc 2008 TT 

a 
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delenit sequi excepturi quod repellat laboriosam scluta leucentium amet dicta non ratione distinctio a I ERG 

nhl cignisaimon eae! 

Work Experience 

ABC Corp. Š Jan 2002 - Dec 2008 XYZ Corp. Š Jan 2002 - Dec 2006 





图 10-2 ”网 站 代码 结构 


1. 请 修改 提供 的 简历 源码 ， 加 入 自己 的 个 人 内 容 。 
2. 尝试 创建 一 个 自己 的 HTML 简历 。 


本 部 分 小 结 


通过 对 HTML 的 学 习 ， 了 解 了 网 页 里 最 基本 的 元 素 构成 ，HIML 也 为 后 面 的 CSS 控 
制 显示 效果 ， 以 及 为 JavaScript 实现 动态 变化 提供 了 页 面 基 础 。 


第 二 部 分 CSS 


通过 对 HTML 语言 的 学 习 , 相信 读者 对 于 前 段 开 发 的 骨架 搭建 ,有 了 一 个 清晰 的 认识 ， 
而 接 下 来 的 CSS 语言 则 是 让 HTML 所 搭建 的 前 端 框架 更 为 美观 、 规 范 的 一 套 技 术 。 通 过 
本 部 分 的 学 习 ， 读 者 将 能 够 使 用 HTML 与 CSS 搭建 一 个 美观 并 且 具 有 简单 交互 功能 的 


网 页 。 
第 11 章 
第 12 章 
第 13 章 
第 14 章 
第 15 章 
第 16 章 


CSS 介绍 

CSS 基本 概念 

CSS 金子 模型 

CSS 定位 

CSS3 动画 及 响应 式 
代码 规范 





11 CSS 介绍 
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11.1 ff 外 


11.1.1 CSS 历史 


从 HTML 被 发 明 开 始 , 样式 就 以 各 种 形式 存在 。 不 同 的 浏览 器 会 结合 它们 各 自 的 样式 
语言 ， 为 用 户 提供 页 面 效 果 的 控制 。 最 初 的 HTML 只 包含 很 少 的 显示 属性 。 

随 着 HTML 的 成 长 ,为 了 满足 页 面 设计 者 的 要 求 ，HTML 添加 了 很 多 显示 功能 。 但 是 
随 着 这 些 功能 的 增加 ，HTML 变 得 越 来 越 杂 乱 ， 而 且 HTML 页 面 也 变 得 越 来 越 腑 肿 。 于 是 
CSS 便 诞生 了 。 

1994 年 哈 坤 。 利 提出 了 CSS 的 最 初 建议 ， 而 当时 伯 特 ， 波 斯 (Bert Bos). 正在 设计 一 
个 名 为 Argo 的 浏览 器 ， 于 是 他 们 决定 一 起 设计 CSS。 

其 实 当 时 在 互联 网 界 已 经 有 过 一 些 统一 样式 表 语 言 的 建议 了 ,但 CSS 是 第 一 个 含有 
“ 层 释 ” 丰 意 的 样式 表 语 言 。 在 CSS 中 ， 一 个 文件 的 样式 可 以 从 其 他 的 样式 表 中 继承 。 读 
者 在 有 些 地 方 可 以 使 用 他 自己 更 喜欢 的 样式 ， 在 其 他 地 方 则 继承 或 “ 层 受 ”作者 的 样式 。 
这 种 层 登 的 方式 使 作者 和 读者 都 可 以 灵活 地 加 入 自己 的 设计 ， 混 合 每 个 人 的 爱好 。 

哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 提出 了 CSS 的 建议 ，1995 年 的 www 网 
络 会 议 〈 国 际 万 维 网 大 会 ) 上 CSS 又 一 次 被 提出 ， 博 斯 演示 了 Argo 浏览 器 支持 CSS 的 例 
子 ， 哈 坤 也 展示 了 支持 CSS 的 Arena 浏览 

同年 ，W3C 组 织 (World Wide Web Consortium) 成 立 ，CSS 的 创作 成 员 全 部 成 为 了 
W3C 的 工作 小 组 并 且 全 力 以 赴 负 责 研发 CSS 标准 ， 层 又 样式 表 的 开发 终于 步 入 正轨 。 有 
越 来 越 多 的 成 员 参 与 其 中 ， 如 微软 公司 的 托马斯 。 莱 尔 顿 (Thomas Reaxdon)， 他 的 努力 
最 终 令 正 浏览 器 支持 CSS 标准 。 


11.1.2 CSS 语言 特点 


1. 丰富 的 样式 定义 

CSS 提供 了 丰富 的 文档 样式 外 观 ， 以 及 设置 文本 和 背景 属性 的 能 力 ， 允 许 为 任 何 元 素 
创建 边框 ， 以 及 元 素 边框 与 其 他 元 素 间 的 距离 ， 以 及 元 素 边框 与 元 素 内 容 间 的 距离 ， 人 允许 
随意 改变 文本 的 大 小 写 方式 、 修 饰 方式 以 及 其 他 页 面 效果 。 

2. 易于 使 用 和 修改 

CSS 可 以 将 样式 定义 在 HTML 元 素 的 style 属性 中 ， 也 可 以 将 其 定义 在 HTML 文档 的 





header 部 分 ， 还 可 以 将 样式 声明 在 一 个 专门 的 CSS 文件 中 ， 以 供 HTML 页 面 引用 。 总 之 ， 
CSS 样式 表 可 以 将 所 有 的 样式 声明 统一 存放 ， 进 行 统 一 管理 。 

另外 ， 可 以 将 相同 样式 的 元 素 进行 归 类 ， 使 用 同一 个 样式 进行 定义 ， 也 可 以 将 某 个 样 
式 应 用 到 所 有 同名 的 HTML. 标签 中 ， 还 可 以 将 一 个 CSS 样式 指定 到 某 个 页 面 元 素 中 。 如 
果 要 修改 样式 ， 只 需要 在 样式 列表 中 找到 相应 的 样式 声明 进行 修改 。 

3. 多 页 面 应 用 

CSS 样式 表 可 以 单独 存放 在 一 个 CSS 文件 中 ， 这 样 就 可 以 在 多 个 页 面 中 使 用 同一 个 
CSS 样式 表 。CSS 样式 表 理论 上 不 属于 任何 页 面 文件 , 在 任何 页 面 文件 中 都 可 以 将 其 引用 。 
这 样 就 可 以 实现 多 个 页 面 风格 的 统一 。 

4. BE 

简 言 之 , 层 琶 就 是 对 一 个 元 素 多 次 设置 同一 个 样式 , 这 将 使 用 最 后 一 次 设置 的 属性 值 。 
例如 对 一 个 站 点 中 的 多 个 页 面 使 用 了 同一 套 CSS 样式 表 , 而 某 些 页 面 中 的 某 些 元 素 想 使 用 
其 他 样式 ， 就 可 以 针对 这 些 样式 单独 定义 一 个 样式 表 应 用 到 页 面 中 。 这 些 后 来 定义 的 样式 
将 对 前 面 的 样式 设置 进行 重 写 ， 在 浏览 器 中 看 到 的 将 是 最 后 面 设置 的 样式 效果 。 

5. 页 面 压缩 

在 使 用 HTML 定义 页 面 效果 的 网 站 中 , 往往 需要 大 量 或 重复 的 表格 和 font 元 素 形成 各 
种 规格 的 文字 样式 ， 这 样 做 的 后 果 就 是 会 产生 大 量 的 HTML 标签 ， 从 而 使 页 面 文件 的 大 小 
增加 。 而 将 样式 的 声明 单独 放 到 CSS 样式 表 中 ， 可 以 大 大 地 减 小 页 面 的 体积 ， 这 样 在 加 载 
页 面 时 使 用 的 时 间 也 会 大 大 减少 。 另 外 ，CSS 样式 表 的 复 用 更 大 程度 地 缩减 了 一 个 主题 下 
其 他 页 面 的 体积 ， 缩 短 了 整个 网 站 内 容 下 载 的 时 间 。 


11.1.3 CSS 工作 原理 


CSS 是 一 种 定义 样式 结构 如 字体 、 颜 色 、 位 置 等 的 语言 ， 被 用 于 描述 网 页 上 的 信息 格 
式 化 和 现实 的 方式 。CSS 样式 可 以 直接 存储 于 HTML 网 页 或 者 单独 的 样式 单 文件 。 无 论 哪 
-种 方式 ， 样 式 单 都 包含 可 以 将 样式 应 用 到 指定 类 型 的 元 素 的 规则 。 当 在 外 部 使 用 时 ， 样 
式 单 规则 被 放置 在 一 个 带 有 文件 扩展 名 _css 的 外 部 样式 单 文档 中 。 
样式 规则 是 可 应 用 于 网 页 中 的 元 素 ， 如 文本 段落 或 链接 的 格式 化 指令 。 样 式 规则 是 由 
-个 或 多 个 样式 属性 及 其 值 组 成 。 内 部 样式 单 直接 放 在 网 页 中 ， 外 部 样式 单 保存 在 独立 的 
文档 中 ， 网 页 通过 一 个 特殊 标签 链接 外 部 样式 单 。 
名 称 CSS 中 的 “ 层 合 (cascading)” 表 示 样 式 单 规则 应 用 于 HTML 文档 元 素 的 方式 。 
具体 地 说 ，CSS 样式 单 中 的 样式 形成 一 个 层次 结构 ， 即 更 具体 的 样式 覆盖 通用 样式 。 样 式 
规则 的 优先 级 由 CSS 根据 这 个 层次 结构 决定 ， 从 而 实现 级 联 效果 。 


11.2 语言 基础 











11.2.1 属性 和 属性 值 


第 
1. 属性 
属性 的 名 字 是 一 个 合法 的 标识 符 ， 它 们 是 CSS 语法 中 的 关键 字 。 一 种 属性 规定 了 格式 


CSS P 


HIML5+CSS3+JavaScript P] HA HRF 








修饰 的 一 个 方面 。 例 如 : color 是 文本 的 颜色 属性 ， 而 text-indent 则 规定 了 段落 的 缩 进 。 

要 掌握 一 个 属性 的 用 法 ， 有 六 个 方面 需要 了 解 ， 具 体 叙 述 如 下 。 

(1) 该 属性 的 合法 属性 值 (legal value)。 显 然 段 落 缩 进 属性 text-indent 只 能 赋 给 一 个 
表示 长 度 的 值 ， 而 表示 背景 图 案 的 background. image 属性 则 应 该 取 一 个 表示 图 片 位 置 链 
接 的 值 或 者 是 表示 不 用 背景 图 案 的 关键 字 none. 

(2) 该 属性 的 默认 值 Cinitial value)。 当 在 样式 表单 中 没有 规定 该 属性 ， 而 且 该 属性 不 
能 从 其 父 级 元 素 那儿 继承 时 ， 则 浏览 器 将 认为 该 属性 取 它 的 默认 值 。 

(3) 该 属性 所 适用 的 元 素 (Applies to)。 有 的 属性 只 适用 于 某 些 个 别 的 元 素 ， 比 如 
white-space 属性 就 只 适用 于 块 级 元 素 。white-space 属性 可 以 取 normal, pre 和 nowrap 这 三 
个 值 。 当 取 normal 的 时 候 ， 浏 览 器 将 忽略 掉 连 续 的 空白 字符 ， 而 只 显示 一 个 空白 字符 。 当 
IM pre 的 时 候 ， 则 保留 连续 的 空白 字符 。 而 取 nowrap 的 时 候 ， 连 续 的 空白 字符 被 忽略 ， 并 
且 不 自动 换行 。 

(D 该 属性 的 值 是 否 被 下 一 级 继承 (inherited )。 

(5) 如 果 该 属性 能 取 百 分 值 (percentage)， 那 么 该 百 分 值 将 如 何 解释 ， 即 该 百 分 值 所 
相对 的 标准 是 什么 。 如 margin 属性 可 以 取 百 分 值 ， 它 是 相对 于 margin 所 存 元 素 的 容器 的 
宽度 。 

(6) 该 属性 所 属 的 媒介 类 型 组 Cmedia groups). 

2. 属性 值 

(1) 整数 和 实数 

这 和 普通 意义 上 的 整数 和 实数 没有 多 大 区 别 。 在 CSS 中 只 能 使 用 浮 点 小 数 ， 而 不 能 像 
其 他 编程 语言 那样 使 用 科学 记 数 法 来 表示 实数 ， 即 1.2E3 在 CSS 中 将 是 不 合法 的 。 下 面 是 
几 个 正确 的 例子 : 整数 : 128、-313; 实数 : 12.20、1415、-12.03 。 

(2) 长 度量 

一 个 长 度量 是 由 整数 或 实数 加 上 相应 的 长 度 单位 组 成 。 长 度量 常用 来 对 元 素 定位 。 而 
定位 分 为 绝对 定位 和 相对 定位 ， 因 而 长 度 单位 也 分 为 相对 长 度 单位 和 绝对 长 度 单位 。 

相对 长 度 单位 有 : em 表示 当前 字体 的 高 度 ， 也 就 是 font.size 属性 的 值 ，ex 表示 当前 
字体 中 小 写字 母 x 的 高 度 ，Dx 表示 一 个 像素 的 长 度 ， 其 实际 的 长 度 由 显示 器 的 设置 决定 ， 
比如 在 800x600 的 设置 下 ， 一 个 像素 的 长 度 就 等 于 屏幕 的 宽度 除 以 800。 

另外 值得 注意 的 一 点 是 ， 子 级 元 素 不 继承 父 级 元 素 的 相对 长 度 值 ， 只 继承 它们 的 实际 
计算 值 。 

(3) 百分数 量 (percentages) 

百分数 量 就 是 数字 加 上 百 分 号 。 显 然 ， 百 分 数量 总 是 相对 的 , 所 以 和 相对 长 度量 一 样 ， 
百分数 量 不 能 被 子 级 元 素 继承 。 

11.2.2 选择 器 
1. 类 型 选择 器 
CSS 中 的 一 种 选择 器 是 元 素 类 型 的 名 称 。 使 用 这 种 选择 器 ( 称 为 类 型 选择 器 )， 可 以 


在 这 种 元 素 类 型 的 每 个 实例 上 应 用 声明 。 例 如， 以 下 简单 规则 的 选择 器 是 Hl1， 因 此 规则 作 
用 于 文档 中 所 有 的 HI 元 素 。 





























H1 {color:red} 


2. 简单 属性 选择 器 

。 class 属性 

class 属性 允许 向 一 组 在 class 属性 上 具有 相同 值 的 元 素 应 用 声明 。body 内 的 所 有 元 素 
都 有 class 属性 。 从 本 质 上 讲 ， 可 以 使 用 class 属性 来 分 类 元 素 ， 在 样式 表 中 创建 规则 来 引 
用 class 属性 的 值 ， 然 后 浏览 器 会 自动 将 这 些 属性 应 用 到 该 组 元 素 。 

类 选择 器 以 标志 符 (句点 ) 开头 ， 用 于 指示 后 面 是 哪 种 类 型 的 选择 器 。 对 于 类 选择 器 ， 
之 所 以 选择 句点 是 因为 在 很 多 编程 语言 中 它 与 术语 “类 ”相关 联 。 翻 译 成 英语 ， 标 志 符 表 
示 “ 带 有 类 名 的 元 素 ”。 

。 id 属性 

id 属性 的 操作 类 似 于 class 属性 ， 但 有 一 点 重要 的 不 同 之 处 是 id 属性 的 值 在 整 篇 文档 
中 必须 是 唯一 的 。 这 使 得 id 属性 可 用 于 设置 单个 元 素 的 样式 规则 。 包 含 id 属性 的 选择 器 
称 为 id 选择 器 。 

需要 注意 的 是 ，id 选择 器 的 标志 符 是 散 列 符号 (#)。 标 志 符 用 来 提醒 浏览 器 接 下 来 出 
现 的 是 id 值 。 

style 属性 

尽管 在 选择 器 中 可 以 使 用 class 和 id 属性 值 ，style 属性 实际 上 可 以 替代 整个 选择 器 机 
制 。 不 是 只 具有 一 个 能 够 在 选择 器 中 引用 的 值 (这 正 是 id 和 class 具有 的 值 )，style 属性 的 
值 实际 上 是 一 个 或 多 个 CSS 声明 。 

通常 情况 下 ， 使 用 CSS， 设 计 者 是 把 所 有 的 样式 规则 置 于 一 个 样式 表 中 ， 使 该 样式 表 
位 于 文档 项 部 的 style 元 素 内 (或 在 外 部 进行 链接 )。 但 是 ， 使 用 style 属性 能 够 绕 过 样式 表 
将 声明 直接 放置 到 文档 的 开始 标记 中 。 

。 组 合 选择 器 类 型 

可 以 将 类 型 选择 器 、id 选择 器 和 类 选择 器 组 合成 不 同 的 选择 器 类 型 来 构成 更 复杂 的 选 
择 器 。 通 过 组 合 选择 器 ， 可 以 更 加 精确 地 处 理 希 望 赋予 某 种 表示 的 元 素 。 例 如 ， 要 组 合 类 
型 选择 器 和 类 选择 器 ， 一 个 元 素 必 须 满足 两 个 要 求 : 它 必 须 是 正确 的 类 型 和 正确 的 类 ， 以 
便 使 样式 规则 可 以 作用 于 它 。 

。 外 部 信息 : 伪 类 和 伪 元 素 

在 CSS1 中 ， 样 式 通常 是 基于 在 HTML 源 代 码 中 出 现 的 标记 和 属性 。 对 于 很 多 设计 情 
景 而 言 这 种 做 法 是 完全 可 行 的 ， 但 是 它 无 法 实现 设计 者 希望 获得 的 一 些 常见 的 设计 效果 。 

设计 伪 类 和 伪 元 素 可 以 实现 其 中 的 一 些 效 果 。 这 两 种 机 制 扩 充 了 CSS 的 表现 能 力 。 在 
CSS1 中 ， 使 用 伪 类 可 以 根据 一 些 情 况 改变 文档 中 链接 的 样式 ， 如 根据 链接 是 否 被 访问 ， 
何 时 被 访问 以 及 用 户 和 文档 的 交互 方式 来 应 用 改变 。 借 助 于 伪 元 素 ， 可 以 更 改元 素 的 第 一 
个 字母 和 第 一 行 的 样式 ， 或 者 添加 源 文 档 中 没有 出 现 过 的 元 素 。 

伪 类 和 伪 元 素 都 不 存在 于 HTML 中 。 也 就 是 说 ， 它 们 在 HTML 代码 中 是 不 可 见 的 。 
这 两 种 机 制 都 得 到 了 精心 设计 ， 使 之 能 够 在 CSS 以 后 的 版 本 中 做 进一步 地 扩充 ; 也 就 是 说 | 第 
实现 更 多 的 效果 。 11 
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11.3. 技术 应 用 


在 HIML 文件 里 加 一 个 超级 链接 ， 引 入 外 部 的 CSS 文档 。 这 个 方法 最 方便 管理 整个 


网 站 的 网 页 风格 ， 它 让 网 页 的 文字 内 容 与 版 面 设计 分 开 。 只 要 在 一 个 CSS 文档 内 ( 扩 





展 名 


为 .CSS) 定义 好 网 页 的 风格 ， 然 后 在 网 页 中 加 一 个 超级 链接 连接 到 该 文档 ， 那 么 网 页 就 会 


按照 在 CSS 文档 内 定义 好 的 风格 显示 出 来 。 


1. CSS 语言 特点 有 哪些 ? 
2. 什么 是 CSS 选择 器 ? 
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12.1 CSS 语法 


CSS 规则 由 两 个 主要 的 部 分 构成 : 选择 器 ， 以 及 一 条 或 多 条 声明 ，CSS 语法 如 图 12-1 
所 示 。 


Selector Declaration Declaration 
Property Value Property Value 


图 12-1 CSS 语法 


选择 器 通常 是 需要 改变 样式 的 HTML 元 素 。 每 条 声明 由 一 个 属性 和 一 个 值 组 成 ,其 中 
属性 (property) 是 设置 的 样式 属性 (style attribute)， 每 个 属性 有 一 个 值 。 属 性 和 值 被 冒号 
分 开 。 

CSS 声明 总 是 以 分 号 〈;) 结束 ，CSS 声明 以 大 括号 〈{}) 括 起 来 : 

p {color:red;text-align:center; } 


为 了 让 CSS 可 读 性 变 得 更 强 ， 你 可 以 每 行 只 描述 一 个 属性 : 


p 

t 

color:red; 
text-align:center; 
} 


CSS 注释 是 用 来 解释 代码 , 并 且 可 以 随意 编辑 它 , 而 浏览 器 会 忽略 它 。CSS 注释 以 “/*” 
开始 ， 以 “#/ ”结束 ， 实 例如 下 : 


/* 这 是 个 注释 */ 

P 

t 
text-align:center; 
/* 这 是 男 一 个 注释 */ 


color:black; 
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font-family:arial; 
} 


12.2 id 和 class 选择 器 


12.2.1 id 选择 器 
id 选择 器 可 以 为 标 有 特定 id 的 HTML 元 素 指定 特定 的 样式 。 HTML 元 素 以 id 属性 
来 设置 id 选择 器 ，CSS 中 id 选择 器 以 “# ”来 定义 。 以 下 的 样式 规则 应 用 于 元 素 属 性 


id-"paral": 








#paral 

{ 
text-align:center; 
color:red; 

} 


12.2.2 class 选择 器 


class 选择 器 用 于 描述 一 组 元 素 的 样式 ，class 选择 器 有 别 于 id 选择 器 ，class 可 以 在 多 
个 元 素 中 使 用 。class 选择 器 在 HTML 中 以 class 属性 表示 , 在 CSS 中 ， 类 选择 器 以 一 个 
点 “.” 号 显示 。 在 以 下 的 例子 中 ， 所 有 拥有 center 类 的 HTML 元 素 均 为 居中 。 


.center {text-align:center; } 
也 可 以 指定 特定 的 HTML 元 素 使 用 class. 在 以 下 实例 中 , 所 有 的 p 元 素 使 用 class="center" 
让 该 元 素 的 文本 居中 。 
p.center {text-align:center;} 
注意 : 类 名 的 第 一 个 字符 不 能 使 用 数字 ! 它 无 法 在 Mozilla X Firefox 中 起 作用 。 
123 CSS 字体 


CSS 字体 属性 定义 字体 ， 加 粗 ， 大 小 ， 文 字样 式 。 例 如 serif 和 sans-serif 字体 之 间 的 


区 别 如 图 12-2 所 示 。 


Sans-serif Serif Serif 
Cred serifs) 


图 12-2 serif 和 sans-serif 字体 之 间 的 区 别 


12.3.1 CSS ## 
在 CSS 中 ， 有 两 种 类 型 的 字体 系列 名 称 。 
。 通用 字体 系列 : 拥有 相似 外 观 的 字体 系统 组 合 〈 如 "Serif' 或 "Monospace")。 
* 特定 字体 系列 : 一 个 特定 的 字体 系列 Ci "Times" 或 "Courier")。 
两 种 字体 具体 特点 如 表 12-1 所 示 。 
表 12-1 CSS 字 型 








Generic family 字体 系列 说 明 

Serif Times New Roman Georgia Serif 字体 中 字符 在 行 的 末端 有 额外 的 装饰 

Sans-serif Arial Verdana "Sans" 是 指 无 ， 即 这 些 字 体 在 末端 没有 额外 的 
装饰 

Monospace Courier New Lucida Console “所 有 的 等 宽 字 符 具 有 相同 的 宽度 


12.3.2 ”字体 系列 


font-family 属性 设置 文本 的 字体 系列 。font-family 属性 应 该 设置 几 个 字体 名 称 作为 一 
种 “后 备 ” 机 制 ， 如 果 浏 览 器 不 支持 第 一 种 字体 ， 那 么 将 尝试 下 一 种 字体 。 如 果 字 体系 列 
的 名 称 超过 一 个 字 ， 则 它 必须 用 引号 ， 如 Font Family: "宋体 "。 多 个 字体 系列 是 用 一 个 去 
号 分 隔 指 明 。 


p{font-family:"Times New Roman", Times, serif;} 


例如 代码 12-1 展示 一 个 字体 系列 的 事例 。 
代码 12-1 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 

«title»Font Example</title> 

«style» 

p.serif(font-family:"Times New Roman",Times,serif;) 
p.sansserif {font-family:Arial, Helvetica, sans-serif; } 
</style> 

</head> 


<body> 
<hl>css font-family«/hl» 
<p class="serif"> 这 一 段 的 字体 是 Times New Roman </p> 
<p class="sansserif"> 这 一 段 的 字体 是 Arial.</p> 
第 
</body> 12 
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</html> 
根据 不 同 的 选择 器 , <p> 标 签 内 部 显示 为 不 同 的 字体 样式 , 字体 变换 效果 如 图 12-3 所 示 。 
Saa LIT =] 

CSS font-family 


这 一 段 的 字体 是 Times New Roman 
这 一 段 的 字体 是 Arial. 














图 12-3 字体 变换 效果 


12.3.3 字体 样式 


主要 是 用 于 指定 斜体 文字 的 字体 样式 属性 。 这 个 属性 有 三 个 值 。 

e 正常 : 正常 显示 文本 。 

e 斜体 :以 斜体 字 显 示 的 文字 。 

倾斜 的 文字 : 文字 向 一 边 倾斜 〈 与 斜体 非常 类 似 ， 但 不 太 支 持 )。 


p.normal (font-style:normal;] 
p.italic {font-style:italic;} 
p.oblique (font-style:oblique;]) 


12.3.4 字体 大 小 


font-size 属性 设置 文本 的 大 小 。 能 否 管理 文字 的 大 小 ， 在 网 页 设计 中 是 非常 重要 的 。 
但 是 ， 不 能 通过 调整 字体 大 小 使 段落 看 上 去 像 标题 ， 或 者 使 标题 看 上 去 像 段落 。 请 务必 使 
用 正确 的 HTML 标签 ， 就 <hl> 一 <h6> 表 示 标 题 和 <p> 表 示 段 沙 : 字体 大 小 的 值 可 以 是 绝对 
大 小 或 相对 大 小 。 

1， 绝 对 大 小 

。 设 置 一 个 指定 大 小 的 文本 ; 

。 不 允许 用 户 在 所 有 浏览 器 中 改变 文本 大 小 

e 当 确 定 了 输出 的 物理 尺寸 时 ， 绝 对 大 小 很 有 用 。 

2， 相 对 大 小 

。 相 对 于 周围 的 元 素来 设置 大 小 ; 

。 允许 用 户 在 浏览 器 中 改变 文字 大 小 ; 

。 如 果 不 指 定 一 个 字体 的 大 小 , 默认 大 小 和 普通 文本 段落 一 样 , 是 16px (16px=lem)。 





12.3.5 设置 字体 类 小 像素 

设置 文字 的 大 小 与 像素 ， 让 您 完全 控制 文字 大 小 。 

hl (font-size:40px;] 

n2 (font-size:30px;] 

p (font-size:14px;) 

上 面 的 例子 可 以 在 Internet Explorer 9, Firefox, Chrome, Opera 和 Safari 中 通过 缩放 浏 
览 器 调整 文本 大 小 。 虽 然 可 以 通过 浏览 器 的 缩放 工具 调整 文本 大 小 ， 但 这 种 调整 是 对 整个 
页 面 的 调整 ， 而 不 仅仅 是 文本 。 

为 了 避免 TE 浏览 器 中 无 法 调整 文本 的 问题 ， 许 多 开发 者 使 用 em 单位 代替 像素 。em 
的 尺寸 单位 由 W3C 建议 。 lem 和 当前 字体 大 小 相等 。 在 浏览 器 中 默认 的 文字 大 小 是 16px。 
Alt, Lem 的 默认 大 小 是 16px。 可 以 通过 下 面 这 个 公式 将 像素 转换 为 em: px/16-em. 

















hl {font-size:2.5em;} /* 40px/16=2.5em */ 

h2 (font-size:1.875em;) /* 30px/16=1.875em */ 

p {font-size:0.875em;} /* 14px/16=0.875em */ 

在 上 面 的 例子 ，em 的 文字 大 小 是 与 前 面 的 例子 中 像素 一 样 。 不 过 ， 如 果 使 用 em 单 


位 ， 则 可 以 在 所 有 浏览 器 中 调整 文本 大 小 。 不 幸 的 是 ,仍然 是 正 浏览 器 的 问题 。 当 调整 文 
本 的 大 小 时 ， 文 本 大 小 会 比 正常 的 尺寸 更 大 或 更 小 。 
12.3.6 ”使 用 百分比 和 EM 组 合 

在 所 有 浏览 器 的 解决 方案 中 ， 设 置 <body> 元 素 的 默认 字体 大 小 的 是 百分比 。 


body {font-size:100%;} 
hl {font-size:2.5em;} 

h2 (font-size:1.875em;) 
p {font-size:0.875em;} 


上 面 的 代码 非常 有 效 。 在 所 有 浏览 器 中 ， 可 以 显示 相同 的 文本 大 小 ， 并 允许 所 有 浏览 
器 缩放 文本 的 大 小 ， 如 代码 12-2 所 示 。 
代码 12-2 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 
<title>Font Size Example</title> 
<style> 

body {font-size:100%;} 

hl {font-size:2.5em; } 
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h2 [font-size:1.875em; ) 
p {font-size:0.875em; } 
</style> 

</head> 

<body> 


<hl>This is heading 1</hl1> 

<h2>This is heading 2</h2> 

<p>This is a paragraph.</p> 

<p> 在 所 有 浏览 器 中 ， 可 以 显示 相同 的 文本 大 小 ， 并 允许 所 有 浏览 器 缩放 文本 的 大 小 。</p> 


</body> 
</html> 


字体 大 小 通过 CSS 控制 显示 效果 如 图 12-4 所 示 。 





e^o mn file:///Usersjmac/Desktop/fF k / HTMLi /Code/16-214 © omgo 








This is heading 1 
This is heading 2 


This is a paragraph. 
在 所 有 浏览 器 中 ， 可 以 显示 相同 的 文本 大 小 ， 并 允许 所 有 浏览 器 编 放 文本 的 大 小 。 





图 12-4 字体 大 小 通过 CSS 控制 显示 效果 


12.3.7 所 有 CSS 字体 属性 


CSS 常见 的 字体 属性 如 表 12-2 所 示 。 


表 12-2 CSS 字体 属性 


Property 描述 

font 在 一 个 声明 中 设置 所 有 的 字体 属性 
font-family 指定 文本 的 字体 系列 

font-size 指定 文本 的 字体 大 小 

font-style 指定 文本 的 字体 样式 

font-variant 以 小 型 大 写字 体 或 者 正常 字体 显示 文本 
font-weight 指定 字体 的 粗细 


12.4 i 色 


12.4.1 CSS 颜色 原理 

颜色 是 由 红 (red)、 绿 (green)、 蓝 (blue) 光线 的 显示 结合 。CSS 中 定义 颜色 使 用 十 
六 进 制 Chex) 表示 法 为 红 、 绿 、 蓝 的 颜色 值 结合 。 可 以 是 最 低 值 是 0 (十 六 进 制 00) 到 最 
高 值 是 235〈 十 六 进 制 FF) 三 个 双 位 数字 的 十 六 进 制 值 写法 ， 以 # 符 号 开始 。 颜 色 的 表示 
方法 如 表 12-3 所 示 。 


表 12-3 CSS 字体 颜色 的 表示 方法 


Color HEX Color RGB 
#000000 rgb(0,0,0) 
#FF0000 rgb(255,0,0) 
#00FF00 rgb(0,255,0) 
#0000FF rgb(0,0,255) 
#FFFF00 rgb(255,255,0) 
#00FFFF rgb(0,255,255) 
#FF00FF rgb(255,0,255) 
#COCOCO rgb(192,192,192) 
#FFFFFF 1gb(255,255,255) 


12.4.2 1600 多 万 种 不 同 的 颜色 


红 、 绿 、 蓝 值 从 0 一 255 的 结合 ， 给 出 了 总 额 超过 1600 多 万 种 不 同 的 颜色 (256 x 256 
x256)。 现 在 大 多 数 的 显示 器 能 够 至 少 显示 16 384 种 颜色 。 如 果 你 看 看 表 12-4 所 示 的 颜色 
表 ， 你 会 看 到 从 0 到 255 不 同 的 红 灯 颜 色 。 要 看 到 充满 色彩 混合 时 红 灯 从 0 到 255 变化 ， 
可 单 击 十 六 进 制 或 RGB 值 。 





表 12-4 CSS 颜色 表 





十 六 进 制 值 RGB 

#000000 rgb(0,0,0) 

#080000 rgb(8,0.0) 

#100000 rgb(16,0.0) 

#180000 rgb(24.0.0) 第 
#200000 rgb(32.0.0) 

#280000 rgb(40,0,0) 四 
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十 六 进 制 值 RGB 
#300000 rgb(48,0,0) 
#380000 rgb(56,0,0) 
#400000 rgb(64,0,0) 
#480000 rgb(72,0,0) 
#500000 rgb(80,0,0) 
#580000 rgb(88,0,0) 
#600000 rgb(96,0,0) 
#680000 rgb(104,0,0) 
#700000 rgb(112,0,0) 
#780000 rgb(120,0,0) 
#800000 rgb(128,0,0) 
#880000 rgb(136,0,0) 
#900000 rgb(144,0,0) 
#980000 rgb(152,0,0) 
#400000 rgb(160,0,0) 
#480000 rgb(168,0,0) 
#B00000 rgb(176,0,0) 
#B80000 rgb(184,0,0) 
#C00000 rgb(192,0,0) 
#C80000 rgb(200,0,0) 
#D00000 rgb(208,0,0) 
#D80000 rgb(216,0,0) 
#E00000 rgb(224,0,0) 
#E80000 rgb(232,0,0) 
#F00000 rgb(240,0,0) 
#F80000 rgb(248,0,0) 
#FF0000 rgb(255,0,0) 
12.4.3 AB 


灰 阶 代表 了 由 最 暗 到 最 亮 之 间 不 同 亮度 的 层次 级 别 ， 为 了 可 以 更 容易 地 选择 合适 的 灰 
色 ， 下 面 编 制 了 灰色 色调 的 表 ， 如 表 12-5 所 示 。 


X125 CSS 灰 阶 表 





HEX RGB 
#000000 rgb(0.0.0) 
#080808 rgb(8.8.8) 
#101010 rgb(16,16,16) 
#181818 rgb(24,24,24) 
#202020 rgb(32,32,32) 
#282828 rgb(40,40,40) 
#303030 rgb(48,48,48) 
#383838 rgb(56.56.56) 
#404040 rgb(64.64.64) 


#484848 rgb(72,72,72) 








HEX RGB 
#505050 rgb(80,80,80) 

#585858 rgb(88,88,88) 

#606060 rgb(96.96.96) 

#686868 rgb(104,104,104) 
#707070 rgb(112,112,112) 
#787878 rgb(120,120,120) 
#808080 rgb(128,128,128) 
#888888 rgb(136,136,136) 
#909090 rgb(144,144,144) 
#989898 1gb(152,152,152) 
#A0A0A0 rgb(160,160,160) 
#A8A8A8 rgb(168,168,168) 
#BOBOBO rgb(176,176,176) 
#B8B8B8 rgb(184,184,184) 
#C0COCO rgb(192,192,192) 
#C8C8C8 rgb(200,200,200) 
#D0D0D0 rgb(208,208,208) 
#D8D8D8 rgb(216,216,216) 
#E0E0E0 rgb(224,224,224) 
#E8E8E8 rgb(232,232,232) 
#FOFOFO rgb(240,240,240) 
#F8F8F8 rgb(248,248,248) 
#FFFFFF 19b(255.255.255) 


12.5 CSS3 背景 


CSS3 中 包含 四 个 新 的 背景 属性 ， 可 以 提供 更 大 的 背景 元 素 
FI USE: 


e background-image; 





制 。 在 本 节 中 将 了 解 以 


e background-size; 


background-origin; 
background-clip. 


12.5.1 浏览 器 支持 


表格 中 的 数字 表示 支持 该 属性 的 第 一 个 浏览 器 版 本 号 。 紧 跟 在 -webkit-, -ms- 或 -moz- 
前 的 数字 为 支持 该 前 级 属性 的 第 一 个 浏览 器 版 本 号 。 相 关 浏 览 器 总 结 如 表 12-6 所 示 。 


表 12-6 CSS 浏览 器 支持 








属性 Chrome IE FireFox Safari Opera 

background-image (with 4.0 9.0 3.6 3.1 11.5 

multiple backgrounds) 

background-size 4.0 9.0 4.0 4.1 10.5 
1.0 -webkit- 3.6 -moz- 3.0 -webkit- 10.0 -o- 

background-origin 1.0 9.0 4.0 3.0 10.5 

background-clip 4.0 9.0 4.0 3.0 10.5 
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12.5.2 属性 


1. CSS3 background-image 属性 
CSS3 中 可 以 通过 background-image 属性 添加 背景 图 片 。 不 同 的 背景 图 像 和 图 像 用 去 
号 隔 开 ， 所 有 的 图 片 中 显示 在 最 项 端的 为 第 一 张 。 


#examplel { 
background-image: url(bg.gif), url(paper.gif); 
background-position: right bottom, left top; 
background-repeat: no-repeat, repeat; 
} 
可 以 给 不 同 的 图 片 设置 多 个 不 同 的 属性 。 
#examplel { 
background: url(img flwr.gif) right bottom no-repeat, url (paper.gif) 


left top repeat; 
} 


2. CSS3 background-size 属性 

background-size 属性 用 于 指定 背景 图 像 的 大 小 。CSS3 以 前 , 背景 图 像 大 小 由 图 像 的 实 
际 大 小 决定 。 

CSS3 中 可 以 指定 背景 图 片 ， 可 以 重新 在 不 同 的 环境 中 指定 背景 图 片 的 大 小 。 您 可 以 
指定 像素 或 百分比 大 小 ， 而 指定 的 大 小 是 相对 于 父 元 素 的 宽度 和 高 度 的 百分比 的 大 小 。 


div 

{ 
background:url(img flwr.gif); 
background-size:80px 60px; 
background-repeat:no-repeat; 

} 


伸展 背景 图 像 完全 填充 内 容 区 域 。 


div 
{ 
background:url(img flwr.gif); 
background-size:100$ 100$; 
background-repeat:no-repeat; 
} 
3. CSS3 的 background-Origin 属性 
background-Origin 属性 指定 了 背景 图 像 的 位 置 区 域 。contentbox，padding-box 和 
border-box 区 域内 可 以 放置 背景 图 像 。 
在 content-box 中 定位 背景 图 片 。 





div 


background:url (img flwr.gif); 

background-repeat : no-repeat; 

background-size:100% 100%; 

background-origin:content-box; 
} 


4. CSS3 background-clip 属性 


CSS3 中 background-clip 背景 剪裁 属性 是 从 指定 位 置 开 始 绘制 。 


#examplel { 
border: 10px dotted black; 
padding: 35px; 
background: yellow; 
background-clip: content-box; 
} 


例如 代码 12-3 利用 不 同 的 background-clip 参数 生成 不 同 的 显示 效果 。 


代码 12-3 


<!DOCTYPE html» 
<html> 
<head> 
«meta charset-"utf-8"» 
«title»Backgroud Example</title> 
«style» 
#examplel { 
border: 10px dotted black; 
padding: 35px; 
background: yellow; 


#example2 { 
border: 10px dotted black; 
padding: 35px; 
background: yellow; 
background-clip: padding-box; 


dexample3 { 
border: 10px dotted black; 
padding:35px; 
background: yellow; 
background-clip: content-box; 
$ 
</style> 
</head> 
<body> 
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<p> 没 有 背景 剪裁 (border-box 没有 定义 ) :</p> 

"examplel"» 

<h2>Lorem Ipsum Dolor</h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 





<p>background-clip: padding-box:«/p» 

<div id="example2"> 

<h2>Lorem Ipsum Dolor</h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 


<p>background-clip: content-box:«/p» 

<div id="example3"> 

<h2>Lorem Ipsum Dolor</h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 


</div> 
</body> 
</html> 
background-clip 属性 显示 效果 如 图 12-5 所 示 。 
i eve T) fies//Users/mac/Desktop/ 作 业 /HTML 书 类 /Code/16-21Chapter” C o fu) oa 





BALAI (border-box tA fit 5): 





Lorem Ipsum Dolor 


. 
. 
. 
m Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
. 
. 








buckground-clip: padding-box 
EERERERRERERERERRERREERRRERERERERRRERERERERERRRRAERRERERERERREREAEE 


Lorem Ipsum Dolor 


. 
. 
. 
m Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat 
. 
. 
. 





Lorem Ipsum Dolor 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, 


图 12-5 background-clip 属性 显示 效果 


12.5.3 ”背景 使 用 实例 


CSS 的 背景 属性 可 以 赋 给 大 多 数 的 HTML 标签 ， 最 常见 的 是 设置 DIV 的 颜色 。 下 面 
给 出 background 通过 灵活 使 用 , 配合 CSS 颜色 属性 的 定义 , 来 改变 页 面 控件 的 颜色 显示 效 


果 ， 见 代码 12-4。 
代码 12-4 


<!DOCTYPE html» 
<html> 
<head> 
<meta charset-"utf-8"» 
<title>Background Example</title> 
<style> 
div{ 
height: 30px; 


#examplel { 
background: yellow; 


f#example2 { 
background-color: red; 


#example3 { 
background: rgba(167, 202, 141, 


#example4 { 
background: #f£9ffbd; 
} 
</style> 
</head> 
<body> 


<p>background: yellow</p> 
<div id="examplel"> 
</div> 


<p>background-color: red</p> 
<div id="example2"> 


</div> 


<p>background: rgba(167, 202, 141, 


0.33); 


0.33) «/p» 
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<div id="example3"> 
</div> 


«p id="example4"> 十 六 进 制 颜色 #f£f9ffbd</p> 
</body> 
</html> 





ene m file:///Users/mac/Desktop/ 作 业 /HTML 书 是/Code/16-21Chapte” © o 6 oO 
Backgroud Example 


background:yellow 
background-color: red 


background: rgba(167, 202, 141,033) 


十 六 进 制 颜色 #yfrbd 








图 12-6 背景 显示 


通过 直接 设置 background, background 会 自动 根据 设置 的 是 颜色 属性 ， 将 
background-color 属性 设置 为 指定 颜色 。 同 时 发 现 ， 可 以 使 用 颜色 名 称 或 RGB 值 ， 以 及 十 
六 进 制 颜色 多 种 方式 来 设置 颜色 。 


. 请 简单 概述 一 下 CSS 语法 规则 。 

简 述 class 选择 器 和 id 选择 器 的 区 别 。 

如 何 设置 CSS 字体 大 小 ? 

. 根据 CSS 知识 ， 判 断 下 面 选 项 中 字体 大 小 更 大 的 是 〈 Vs 
A. hl {font-size:2.5em;} 


WN 一 


B. hl {font-size:30px;} 
C. hl {font-size:100%;} 
D. 无 法 比较 
5. 下 列 哪个 CSS 颜色 是 不 合法 的 ? 
A. #FF0000 
B. #FFFFFF 
C. rgb(0,0,0) 
D. rgb(249,249,249) 
6. 如 何 实现 CSS 控制 背景 ? 


¢ 


) 





S136 CSS 盒子 模型 


13.1 盒子 模型 简介 


可 以 将 所 有 HTML 元 素 看 成 盒子 ， 对 于 CSS， 在 设计 和 布局 时 使 用 “box model" ix 
-术语 。CSS 盒 模 型 本 质 上 是 一 个 盒子 ， 封 装 周围 的 HTML 元 素 ， 它 包括 : 边 距 、 边 框 、 
填充 和 实际 内 容 。 售 模 型 允许 在 其 他 元 素 和 周围 元 素 边框 之 间 放 置 元 素 。 
盒子 模型 (Box Model) 如 图 13-1 所 示 。 





图 13-1 盒子 模型 


不 同 部 分 的 说 明 。 

* Margin (SMAKE): 清除 边框 外 的 区 域 ， 外 边 距 是 透明 的 。 

* Border GAHE): 围绕 在 内 边 距 和 内 容 外 的 边框 。 

e Padding (内 边 距 ): 清除 内 容 周围 的 区 域 ， 内 边 距 是 透明 的 。 

* Content (W): 盒子 的 内 容 ， 显 示 文 本 和 图 像 。 

为 了 在 所 有 浏览 器 中 的 元 素 的 宽度 和 高 度 设 置 正 确 ， 你 需要 知道 盒 模 型 是 如 何 工 
作 的 。 
13.1.1 元 素 的 宽度 和 高 度 

当 指 定 一 个 CSS 元 素 的 宽度 和 高 度 属 性 时 ， 只 须要 设置 内 容 区 域 的 宽度 和 高 度 。 要 知 
道 ， 完 全 大 小 的 元 素 ， 还 必须 添加 填充 、 边 框 和 边 距 。 

下 面 的 例子 中 的 元 素 的 总 宽度 为 300px。 














div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } 


计算 : 300px CRE) +50px ( 左 + 右 填充 )+50px ( 左 + 右边 框 )+50px( 左 + 右边 距 )=450px。 
试想 一 下 ， 只 有 250px 的 空间 设置 总 宽度 为 250px 的 元 素 : 


div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0; } 


最 终 元 素 的 总 宽度 计算 公式 是 这 样 的 :总 元 素 的 宽度 = 宽度 + 左 填 充 + 右 填充 + 左边 框 + 
右边 框 + 左边 距 + 右边 距 。 

元 素 的 总 高 度 最 终 计算 公式 是 这 样 的 : 总 元 素 的 高 度 = 高 度 + 顶部 填充 + 底部 填充 + 上 边 
框 + 下 边框 + 上 边 距 + 下 边 距 。 


13.1.2 浏览 器 的 兼容 性 问题 


- 旦 为 页 面 设置 了 恰当 的 DTD， 大 多 数 的 浏览 器 都 会 按照 上 面 的 图 示 来 呈现 内 容 。 

然而 下 5 和 下 6 浏览 器 呈现 的 内 容 却 是 不 正确 的 。 根 据 W3C 的 规范 ， 元 素 内 容 占据 的 空 
间 是 由 width 属性 设置 的 , 而 内 容 周围 的 padding 和 border 值 是 另外 计算 而 来 的 。IE5X 
和 下 6 浏览 器 在 怪异 模式 中 使 用 自己 的 非 标准 模型 .这 些 浏览 器 的 width 属性 不 是 内 容 的 
宽度 ， 而 是 内 容 、 内 边 距 和 边框 的 宽度 的 总 和 。 

目前 ， 虽 然 已 有 方法 可 以 解决 这 个 问题 ， 但 是 最 好 的 解决 方案 是 回避 这 个 问题 。 也 就 
是 ， 不 要 给 元 素 添加 具有 指定 宽度 的 内 边 距 ， 而 是 尝试 将 内 边 距 或 外 边 距 添 加 到 元 素 的 父 
元 素 和 子 元 素 中 。 

IE 8 浏览 器 及 更 早 IE 浏览 器 版 本 不 支持 填充 的 宽度 和 边框 的 宽度 属性 设置 。 要 想 解 决 
IE 8 及 更 早 版 本 的 浏览 器 不 兼容 问题 可 以 在 HTML 页 面 声明 <!IDOCTYPE html. 

为 了 支持 盒子 模型 ， 需 要 进一步 了 解 哪些 属性 可 以 构造 盒子 模型 ? 


13.2 CSS 边框 


13.2.1 边框 样式 


边框 样式 属性 指定 要 显示 什么 样 的 边界 。border-style 属性 用 来 定义 边框 的 样式 。 
。 none: 默认 无 边框 。 

* dotted: 定义 一 个 点 线 边框 。 

。 dashed: 定义 一 个 虚线 边框 。 

。 solid: 定义 实 线 边框 。 

double: 定义 两 个 边框 。 两 个 边框 的 宽度 和 border-width 的 值 相同 。 

e groove: 定义 3D 沟 模 边框。 效果 取 决 于 边框 的 颜色 值 。 

e ridge: 定义 3D 将 边框 。 效 果 取 决 于 边框 的 颜色 值 。 

inset: 定义 一 个 3D 的 嵌入 边框 。 效 果 取 决 于 边框 的 颜色 值 。 


outset: 定义 一 个 3D 突出 边框 。 效 果 取 决 于 边框 的 颜色 值 。 第 
事例 代码 见 代码 13-1. 13 
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代码 13-1 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 


<title>Border Example</title> 





<style> 

p-none (border-style:none;] 
p-dotted {border-style:dotted; } 
p-dashed {border-style:dashed; } 
p-solid {border-style:solid; } 
p-double {border-style:double; } 
p.groove {border-style:groove; } 
p.ridge {border-style: ridge; } 
p.inset {border-style:inset; } 
p-outset {border-style:outset; } 
p-hidden {border-style:hidden; } 
</style> 

</head> 

<body> 


<p class="none">AGWHE. </p> 

<p class="dotted"> 虚 线 边框 。</P> 
<p class="dashed"> 虚 线 边框 。</P> 
<p class="solid"> 实 线 边框 。</p> 
<p class="double"> 双 边框 。</P> 
<p class-"groove"» 冲模 边框 。</p> 
<p class="ridge">221KiWHE. </p> 
<p class="inset">HKAWHE. </p> 
<p class="outset"> 外 凸 边框 。</p> 
<p class="hidden"> 隐 藏 边框 。</p> 
</body> 


</html> 
边框 线 显示 效果 如 图 13-2 所 示 。 
13.2.2 边框 宽度 


可 以 通过 border-width 属性 为 边框 指定 宽度 。 为 边框 指定 宽度 的 方法 有 两 种 : 可 以 指 
定 长 度 值 ， 比 如 2px 或 O.lem (CHR JJ px. pt. cm, em 等 ); 或 者 使 用 三 个 关键 字 之 一 ， 


它们 分 别 是 thick, medium 〈 默 认 值 ) 和 thin。 






































图 13-2 ”边框 线 显示 效果 


注意 : CSS 没有 定义 三 个 关键 字 的 具体 宽度 ， 所 以 一 个 用 户 可 能 把 thick、medium 和 
thin 分 别 设置 为 等 于 5px. 3px 和 2px， 而 另 一 个 用 户 则 分 别 设置 为 3px、2px 和 1px. 


p.one 

t 
border-style:solid; 
border-width:5px; 

} 

p.two 

t 
border-style:solid; 
border-width:medium; 

} 


13.2.3 边框 颜色 


border-color 属性 用 于 设置 边框 的 颜色 。 可 以 设置 的 颜色 。 第 
。 name: 指定 颜色 的 名 称 ， 如 "red". 13 
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e RGB: 指定 RGB 值 ， 如 "rgb(255.0.0)"。 
。 Hex: 指定 十 六 进 制 值 ， 如 "#70000". 
您 还 可 以 设置 边框 的 颜色 为 "transparent"。 


注意 : border-color 单独 使 用 是 不 起 作用 的 ， 必 须 得 先 使 用 border-style 来 设置 边框 
样式 。 

p.one 

É 
border-style:solid; 
border-color:red; 

} 

p.two 

{ 
border-style:solid; 
border-color: #98bf21; 

} 


13.2.4 边框 -单独 设置 各 边 
在 CSS 中 ， 可 以 对 不 同 的 侧面 指定 不 同 的 边框 。 


Pp 

{ 
border-top-style:dotted; 
border-right-style:solid; 
border-bottom-style:dotted; 
border-left-style:solid; 

} 


上 面 的 例子 也 可 以 设置 一 个 单一 属性 。 
border-style:dotted solid; 


border-style 属性 可 以 有 1 一 4 个 值 。 
(1) border-style:dotted solid double dashed 
e 上 边框 是 dotted; 

。 右边 框 是 solid; 

e 底 边 框 是 double: 

。 左边 框 是 dashed. 

(2) border-style:dotted solid double 
。 上 边框 是 dotted; 

e 左 、 右 边框 是 solid; 

。 底 边 框 是 double。 

(3) border-style:dotted solid 


。 上 、 底 边框 是 dotted; 

e 右 、 左 边框 是 solid. 

(4) border-style:dotted 

。 四 面 边框 是 dotted。 

上 面 的 例子 用 了 border-style。 然 而 ， 它 也 可 以 和 border-width, border-color 一 起 使 用 。 


13.2.5 边框 -简写 属性 


上 面 的 例子 用 了 很 多 属性 来 设置 边框 , 也 可 以 在 一 个 属性 中 设置 边框 。 可 以 在 "border" 
属性 中 设置 : 

e border-width; 

e border-style (required); 























e border-color. 


border:5px solid red; 


13.3 CSS $B 


轮廓 〈outline) 是 绘制 于 元 素 周围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 素 
的 作用 。 轮 廓 属性 可 以 指定 元 素 轮廓 的 样式 、 颜 色 和 宽度 。CSS 轮廓 见 图 13-3 所 示 。 


Border 
Content 





图 13-3 CSS 轮廓 


13.3.1 HAA H 


CSS 版 本 列表 示 哪 个 CSS 版 本 定义 了 该 属性 CCSS1 或 者 CSS2), CSS 轮廓 属性 见 
表 13-1. 


表 13-1 CSS 轮廓 属性 





属性 说 明 值 CSS 版 本 
outline 在 一 个 声明 中 设置 所 有 的 轮廓 属性  outline-color CSS2 
outline-style 
outline-width 
inherit 第 
13 
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属性 说 明 值 CSS 版 本 
outline-color 设置 轮廓 的 颜色 color-name CSS2 
hex-number 
rgb-number 
invert 
inherit 
outline-style 设置 轮廓 的 样式 Done CSS2 
dotted 
dashed 
solid 
double 
groove 
ridge 
inset 
outset 
inherit 
outline-width 设置 轮廓 的 宽度 thin CSS2 
medium 
thick 
length 


inherit 





13.3.2 WA Ral 


轮廓 〈outline) 实例 见 代 码 13-2. 
代码 13-2 


<!DOCTYPE html» 

«html» 

<head> 

«meta charset-"utf-8"» 

<title>Border Example</title> 

<style> 

p.one 

t 
border:lpx solid red; 
outline-style:solid; 
outline-width:thin; 


p.two 


border:lpx solid yellow; 
outline-style:dotted; 
outline-width:3px; 


</style> 
</head> 
<body> 


<p class="one">This is some text in a paragraph.</p> 
<p class="two">This is some text in a paragraph.</p> 


<p><b> 注 意 :</b> 如 果 只 有 一 个 !DOCTYPE 指定 IE8 支持 outline 属性 。</p> 
</body> 
</html> 


file./I/Users/mac/Desktop/FXP/HTML3SRI/Code/16-21Chapte © 


注意 : 如 果 只 有 一 个 IDOCTYPE 指定 IES 支持 outline 局 性。 





图 13-4 Border 样式 效果 
图 13-4 展示 了 使 用 border 设置 元 素 轮廓 ， 同 时 还 展示 了 如 何 设置 border 的 颜色 、 样 
式 等 属性 。 
13.4 CSS margin 


CSS margin〔 外 边 距 ) 属性 定义 元 素 周 围 的 空间 。margin 清除 周围 的 元 素 〈 外 边框 ) 
的 区 域 。margin 没有 背景 颜色 ， 完 全 透明 的 margin 可 以 单独 地 改变 元 素 的 上 、 下 、 左 、 碳 
边 距 ， 也 可 以 一 次 性 地 改变 所 有 的 属性 。CSS margin 属性 值 如 表 13-2 所 示 。 


表 13-2 CSS margin 属性 值 








a 说 明 
auto 设置 浏览 器 边 距 ， 这 样 做 的 结果 会 依赖 于 浏览 器 
length 定义 一 个 固定 的 margin. (使 用 像素 、pt、em 等 ) 
% 定义 一 个 使 用 百分比 的 边 距 
13.4.1 margin 单 边 外 边 距 属性 
在 CSS 中 ， 可 以 对 不 同 的 侧面 指定 不 同 的 边 距 。 13 
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margin-top:100px; 
margin-bottom:100px; 
margin-right:50px; 
margin-left:50px; 


13.4.2 margin 简写 属性 


为 了 缩短 代码 ， 有 可 能 使 用 一 个 属性 中 margin 指定 的 所 有 边 距 属性 。 这 就 是 所 谓 的 缩 
写 属性 。 所 有 边 距 属性 的 缩写 属性 是 "margin"。 


margin:100px 50px; 


margin 属性 可 以 有 1 一 4 个 值 。 
(1) margin:25px 50px 75px 100px 
e 上边 距 为 25px:; 

。 右边 距 为 50px; 

e 下 边 距 为 75px; 

。 左边 距 为 100px。 

(2) margin:25px 50px 75px 

e 上 边 距 为 25px; 

。 左右 边 距 为 50px; 

。 下 边 距 为 75px。 

(3) margin:25px 50px 

e 上 下 边 距 为 25px; 

。 左右 边 距 为 50px。 

(4) margin:25px 

。 所 有 的 四 个 边 距 都 是 25px。 


13.4.3 所 有 的 CSS 边 距 属性 
所 有 的 CSS 边 距 属性 如 表 13-3 所 示 。 
表 13-3 CSS 边 距 属性 








属性 描述 

margin 简写 属性 。 在 一 个 声明 中 ， 设 置 所 有 外 边 距 属性 
margin-bottom 设置 元 素 的 下 外 边 距 

margin-left 设置 元 素 的 左 外 边 距 

margin-right 设置 元 素 的 右 外 边 距 

margin-top 设置 元 素 的 上 外 边 距 


13.4.4 margin 样 倒 
这 个 例子 演示 了 一 个 使 用 百分比 值 下 边 距 的 元 素 ， 与 没有 设置 下 边 距 的 元 素 作对 比 的 


效果 图 。 详 见 代 码 13-3， 显 示 效 果 见 图 13-5 所 示 。 
代码 13-3 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 
<title>Margin Example</title> 
<style> 

p.bottommargin {margin-bottom: 25%; } 
</style> 

</head> 

<body> 


<p> 这 是 一 个 没有 指定 边 距 大 小 的 段落 。< /p> 
<p class="bottommargin"> 这 是 一 个 指定 下 边 距 大 小 的 段落 。</p> 
<p> 这 是 一 个 没有 指定 边 距 大 小 的 段落 。</p> 


</body> 
</html> 


e^o 四 file;JJUsers/mac/Desktop/fFik/HTML3SW/Code/16-21Chapter: © o ô a 


Margin Example 






这 是 一 个 没有 指定 边 距 大 小 的 段落 。 
这 是 一 个 指定 下 边 距 大 小 的 段落 ， 


这 是 一 个 没有 指定 边 距 大 小 的 段落 








图 13-5 margin 样 例 


13.5 CSS padding 


CSS padding (填充 ) 属性 定义 元 素 边框 与 元 素 内 容 之 间 的 空间 。 当 元 素 的 padding (Ht 
$E) CARE) 被 清除 时 ， 所 “释放 ”的 区 域 将 会 受到 元 素 背 景 颜色 的 填充 。 
单独 使 用 填充 属性 可 以 改变 上 下 左右 的 填充 。 缩 写 填充 属性 也 可 以 使 用 ， 一 旦 改变 一 
切 都 改变 。 
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CSS padding 属性 可 能 的 值 如 表 13-4 所 示 。 


表 13-4 CSS padding 属性 


值 说 明 
length 定义 一 个 固定 的 填充 像素、pt、em 等 ) 
% 使 用 百分比 值 定义 一 个 填充 


13.5.1 填充 单 边 内 边 距 属性 
在 CSS 中 ， 它 可 以 对 不 同 的 侧面 指定 不 同 的 填充 。 


padding-top:25px; 
padding-bottom:25px; 
padding-right:50px; 
padding-left:50px; 


13.5.2 ”填充 简写 属性 


为 了 缩短 代码 ， 它 可 以 在 一 个 属性 中 指定 的 所 有 填充 属性 ， 这 就 是 所 谓 的 缩写 属性 。 
所 有 的 填充 属性 的 缩写 属性 是 "padding"。 


padding:25px 50px; 


padding 属性 ， 可 以 有 1 一 4 个 值 。 
(1) padding:25px 50px 75px 100px 
。 上 填充 为 25px; 

e AGEN 50px; 

。 下 填充 为 75px; 

e 左 填 充 为 100px. 

(2) padding:25px 50px 75px 

。 上 填充 为 25px; 

e 左右 填充 为 SOpx: 

。 下 填充 为 75px。 

(3) padding:25px 50px 

。 上 下 填充 为 25px; 

。 左右 填充 为 50px。 

(4) padding:25px 

。 所 有 的 填充 都 是 25px。 


13.53 CSS 填充 属性 


CSS 填充 属性 如 表 13-5 所 示 。 





#13-5 CSS 填充 属性 


属性 说 明 

padding 使 用 缩写 属性 设置 在 一 个 声明 中 的 所 有 填充 属性 
padding-bottom 设置 元 素 的 底部 填充 

padding-left 设置 元 素 的 左 部 填充 

padding-right 设置 元 素 的 右 部 填充 

padding-top 设置 元 素 的 顶部 填充 


13.54 padding 2 #1 


下 面 的 实例 展示 了 padding 属性 对 于 控件 显示 效果 的 变化 ， 代 码 见 代码 13-4, 2308 
图 13-6 所 示 。 
代码 13-4 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 
<title>Padding Example</title> 
<style> 

p.exl {padding:2cm; } 

p.ex2 {padding:0.5cm 3cm; } 
p.ex3 {padding: 20%; } 
</style> 

</head> 


<body> 

<p class="ex1l1"> 这 个 文本 两 边 的 填充 边 距 一 样 。 每 边 的 填充 边 距 为 2cm. </p> 

<p class="ex2"> 这 个 文本 的 顶部 和 底部 填充 边 距 都 为 0.5cm， 左 右 的 填充 边 距 为 3cm </p> 
<p class="ex3"> 这 个 文本 的 赏析 左右 填充 边 距 都 为 父 容器 的 50%. </p> 


</body> 
</html> 
OECD LLLLLLLULGICCLLLULCASLIABUGLA ULLO LOETZZLSICECAIL,CENLIIÁÓÁCCTLLTTLALLoILLOOOCO.IL]SA OL- LL! 
e^o 四 file./IUsers/mac/Desktop/fFib/HTML*SRl/Codejt6-21Chapte- — C, olio 





SEPALS. FEL OR 


这 个 文本 的 顶部 和 底部 填充 边 距 都 为 05 厚 米 ， 左 右 的 填充 边 距 为 3 厘米 。 











第 
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AUNE 


. 简要 说 明 CSS 盒子 模型 。 

. CSS 有 哪儿 种 常用 的 边框 样式 ? 简单 说 明 其 功能 。 
. CSS margin 设置 为 auto 是 什么 含义 ? 

. padding:25px 50px 含义 是 ( do 


A. 上 下 填充 为 25px， 左 右 填充 为 50px 
B. 上 下 填充 为 50px， 左 右 填充 为 15px 
C. 上 下 填充 为 25px 
D. 左右 填充 为 15px 








S148 CSS 定位 





通过 上 一 小 节 讲述 了 盒子 模型 的 使 用 ， 可 以 创造 出 一 个 个 如 同 盒子 一 样 的 控件 ， 控 件 
内 部 的 样式 就 完成 了 。 显 然 接 下 来 需要 解决 元 素 之 间 即 “盒子 ”之 间 的 相对 位 置 关 系 ， 那 
么 就 要 利用 到 CSS 所 提供 的 设置 元 素 定位 功能 。 主 要 通过 position、float 和 align 来 完成 元 
素 间 的 相对 定位 。 


14.1 position 属性 


position 属性 指定 了 元 素 的 定位 类 型 。position 属性 的 四 个 值 : 

static; 

* relative; 

e fixed; 

* absolute. 

元 素 可 以 使 用 顶部 、 底 部 、 左 侧 和 右 侧 属性 定位 。 然 而 这 些 属性 仍 无 法 工作 ， 除 非 事 
先 设 定 position 属性 。 它 们 也 有 不 同 的 工作 方式 ， 这 取决 于 它们 的 定位 方法 。 


14.1.1 static 定 位 


HTML 元 素 的 默认 值 ， 即 没有 定位 元 素 出 现在 正常 的 流 中 。 静 态 定位 的 元 素 不 会 受到 
top. bottom, left, right 影响 。 


14.1.2 fixed 定位 
元 素 的 位 置 相 对 于 浏览 器 窗口 是 固定 位 置 ， 即 使 窗口 是 深 动 ， 不 会 移动 。 


p.pos fixed 


t 
position:fixed; 
top:30px; 
right:5px; 

} 


fixed 定位 在 IE7 ATES 浏览 器 下 需要 描述 !IDOCTYPE 才能 支持 。fixed 定位 使 元 素 的 
位 置 与 文档 流 无 关 ， 因 此 不 占据 空间 。fixed 定位 的 元 素 和 其 他 元 素 重 县 。 


14.1.3 relative 定位 
相对 定位 元 素 的 定位 是 相对 其 正常 位 置 。 
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h2.pos left 

{ 
position:relative; 
left:-20px; 

} 

h2.pos_right 

{ 
position:relative; 
left:20px; 

H 
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h2.pos_top 

{ 
position:relative; 
top:-50px; 

H 


相对 定位 元 素 经 常 被 用 作 绝 对 定位 元 素 的 容器 块 。 
14.1.4 absolute 定位 
绝对 定位 的 元 素 的 位 置 是 相对 于 最 近 的 已 定位 父 元 素来 说 明 ， 如 果 元 素 没有 已 定位 的 
父 元 素 ， 那 么 它 的 位 置 相对 于 <html>。 
h2 
{ 
position:absolute; 
left:100px; 
top:150px; 
} 
absolute 定位 使 元 素 的 位 置 与 文档 流 无 关 ， 因 此 不 占据 空间 。absolute 定位 的 元 素 和 
其 他 元 素 重 登 。 
14.1.5 € £6.* 
元 素 的 定位 与 文档 流 无 关 ， 所 以 它们 可 以 覆盖 页 面 上 的 其 他 元 素 。 z-index 属性 指定 了 
一 个 元 素 的 堆 登 顺序 (哪个 元 素 应 该 放 在 前 面 或 后 面 )。 一 个 元 素 可 以 有 正 数 或 负数 的 堆 悉 





position:absolute; 
left:0px; 


top: 0px; 


z-index:-1; 


} 
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合 ， 又 没有 指定 z-index， 那 么 最 后 定位 在 HTML 代码 中 的 元 素 将 被 显示 在 最 前 面 。 


14.1.6 


CSS position 属性 总 结 


所 有 主流 的 浏览 器 都 支持 position 属性 。position 属性 规定 元 素 的 定位 类 型 ， 影 响 元 





素 框 生成 


的 方式 。 


CSS position 可 能 的 值 如 表 14-1 所 示 。 


值 Hi 


314-1 CSS position 可 能 的 值 
述 
生成 绝对 定位 的 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进 行 定位 。 如 果 
不 存在 这 样 的 父 元 素 ， 则 依据 最 初 的 包含 块 。 根 据 用 户 代理 的 不 同 ， 最 初 的 包 
含 块 可 能 是 画布 或 HTML 元 素 
元 素 的 位 置 通过 left. top. right 以 及 bottom 属性 进行 规定 ， 也 可 以 通过 z-index 


























absolute ”进行 层次 分 级 
o 将 元 素 框 从 文档 流 完全 删除 ， 并 相对 于 其 包含 块 定位 。 包 含 块 可 能 是 文档 中 的 
男 一 个 元 素 或 者 是 初始 包含 块 。 元 素 原先 在 正常 文档 流 中 所 占 的 空间 会 关闭 ， 
就 好 像 元 素 原来 不 存在 一 样 。 元 素 在 定位 后 ， 会 生成 一 个 块 级 框 ， 而 不 论 原来 
CHEIE 中 生成 何 种 类 型 的 框 
。 生成 固定 / 绝对 定位 的 元 素 ， 相 对 于 浏览 器 窗口 进行 定位 
fixed — e 元 素 的 位 置 通过 left. top. right 以 及 bottom 属性 进行 规定 
e 元 素 框 的 表现 类 似 于 将 position 设置 为 absolute， 不 过 其 包含 块 是 视窗 本 身 
。 生成 相对 定位 的 元 素 ， 相 对 于 其 正常 位 置 进 行 定 位 
* 因此 ，"left:20" 会 向 元 素 的 LEFT 位 置 添加 20px 
relative e 相对 定位 实际 上 被 看 作 是 普通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 是 相对 于 
它 在 普通 流 中 的 位 置 。 元 素 框 偏 移 某 个 距离 。 元 素 仍 保持 其 未 定位 前 的 形状 ， 
仍 保留 原本 所 占 的 空间 
。 默认 值 。 没 有 定位 ， 元 素 出 现在 正常 的 流 中 (忽略 top. bottom, left, right 或 
dunt 者 z-index 声明 ， 即 上 述 声 明 无 效 ) 
。 元 素 框 正常 生成 。 块 级 元 素 生成 一 个 矩形 框 ， 作 为 文档 流 的 一 部 分 ， 行 内 元 素 
则 会 创建 一 个 或 多 个 行 框 ， 置 于 其 父 元 素 中 
inherit e 规定 应 该 从 父 元 素 继 承 position 属性 的 值 


CSS 定位 属性 允许 对 元 素 进行 定位 ， 如 表 14-2 所 示 。 
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#142 CSS 定位 属性 





属性 描述 

position 把 元 素 放置 到 一 个 静态 的 、 相 对 的 、 绝 对 的 或 固定 的 位 置 中 

top 定义 了 一 个 定位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 边界 之 间 的 偏 移 
Tight 定义 了 定位 元 素 右 外 边 距 边界 与 其 包含 块 右 边界 之 间 的 偏 移 
bottom 定义 了 定位 元 素 下 外 边 距 边界 与 其 包含 块 下 边界 之 间 的 偏 移 

left 定义 了 定位 元 素 左 外 边 距 边界 与 其 包含 块 左边 界 之 间 的 偏 移 
overflow 设置 当 元 素 的 内 容 溢出 其 区 域 时 发 生 的 事情 

clip 设置 元 素 的 形状 。 元 素 被 前 入 这 个 形状 中 ， 然 后 显示 出 来 
vertical-align 设置 元 素 的 垂直 对 齐 方式 

z-index 设置 元 素 的 堆 受 顺序 


14.1.7 position 实 便 


实例 展示 利用 position 属性 设置 一 个 div 元 素 ， 让 一 个 <p> 标 签 能 够 显示 在 其 上 方 。 由 
于 其 absolute 属性 值 ， 让 div 紧 贴 父 控件 (HTML)， 见 代码 14-1. 
代码 14-1 


<!DOCTYPE html» 
<html> 
<head> 
«meta charset-"utf-8"» 
«title»Position Example</title> 
«style» 
div 
{ 
background: yellow; 
position:absolute; 
left: 0px; 
top: 0px; 
z-index:-1; 
} 
</style> 
</head> 


<body> 

<hl>This is a heading</hl> 

<div width="100" height="140" /> 

<p> 因 为 图 像 元 素 设置 了 z-index 属性 值 为 -1， 所 以 它 会 显示 在 文字 之 后 。</p> 
</body> 

«/html» 


position 属性 显示 效果 如 图 14-1 所 示 。 
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图 14-1 position 属性 显示 效果 


14.2 float 属性 


14.2.1 什么 是 CSS 的 float 

CSS 的 float (浮动 )， 会 使 元 素 向 左 或 向 右 移 动 ， 其 周围 的 元 素 也 会 重新 排列 。float 
(浮动 )， 往 往 用 于 图 像 ， 但 在 布局 时 同样 具有 重要 作用 。 
14.2.2 元素 浮动 方式 

元 素 的 水 平方 向 浮动 ， 意 味 着 元 素 只 能 左右 移动 而 不 能 上 下 移动 。 一 个 浮动 元 素 会 尽 
量 向 左 或 向 右 移 动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 男 一 个 浮动 框 的 边框 为 止 。 

浮动 元 素 之 后 的 元 素 将 围绕 它 ， 浮 动 元 素 之 前 的 元 素 将 不 会 受到 影响 。 如 果 图 像 是 右 
浮动 ， 下 面 的 文本 流 将 环绕 在 它 左 边 。 

img { float:right; } 
14.23 ”彼此 相 急 的 浮动 元 素 


把 几 个 浮动 的 元 素 放 到 一 起 ， 如 果 有 空间 的 话 ， 它 们 将 彼此 相 邻 。 在 这 里 ， 我 们 对 图 
片 亡 使 用 float 属性 。 


.thumbnail { float:left; width:110px; height:90px; margin:5px; } 














14.2.4 清除 浮动 使 用 clear 


元 素 浮动 之 后 ， 周 围 的 元 素 会 重新 排列 。 为 了 避免 这 种 情况 ， 使 用 clear 属性 。clear 
属性 指定 元 素 两 侧 不 能 出 现 浮动 元 素 。 使 用 clear 属性 向 文本 中 添加 图 片 廊 。 


.text line { clear:both; } 
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14.2.5 CSS 中 所 有 的 浮动 属性 


CSS 版 本 列表 示 不 同 的 CSS 版 本 CCSS1 或 CSS2) 定义 了 该 属性 ，CSS 浮动 属性 如 
表 14-3 所 示 。 
表 14-3 CSS 浮动 属性 


属性 描述 fü CSS 版 本 
clear 指定 不 允许 元 素 周围 有 浮动 元 素 left CSS1 





float 指定 一 个 盒子 〈 元 素 ) 是 否 可 以 浮动 left CSS1 


14.2.6 float 实例 


下 面 的 实例 展示 了 如 何 使 用 float 属性 让 段落 的 第 一 个 文字 大 写 ， 见 代码 14-2. 
代码 14-2 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 

«title»Float Example</title> 

«style» 

span 

t 
float:left; 
width:1.2em; 
font-size:400$; 
font-family:algerian, courier; 
line-height:805$; 

} 

</style> 

</head> 


<body> 

<p> 

<span> 这 </span> 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 





这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
</p> 


<p> 
ZELMA Bezerp, S83 —SEIRAZE span 元 素 中 。 

这 个 span 元 素 的 宽度 是 当前 字体 大 小 的 1.2 倍 。 

这 个 span 元 素 是 当前 字体 的 400% (相当 大 ) ， Line-height W 80$. 
文字 的 字体 为 "Algerian"。 

</p> 

</body> 

</html> 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 

«title»Float Example</title> 

«style» 

span 

t 
float:left; 
width:1.2em; 
font-size:400$; 
font-family:algerian,courier; 
line-height:80$; 

} 

</style> 

</head> 


<body> 

<p> 
<span> 这 </span> 是 一 些 文本 。 
这 是 一 些 文本 。 
这 是 一 些 文本 。 
这 是 一 些 文本 。 这 
这 是 一 些 文本 。 这 
这 是 一 些 文本 。 这 
这 是 一 些 文本 。 这 
这 是 一 些 文本 。 这 
</p> 





<p> 
在 上 面 的 段落 中 ， 第 一 个 字 嵌 入 在 span 元 素 中 。 

这 个 span 元 素 的 宽度 是 当前 字体 大 小 的 1.2 倍 。 

这 个 span 元 素 是 当前 字体 的 4003 (相当 大 ) ， line-height 为 80%。 
文字 的 字体 为 "Algerian"。 


</p> 

</body> 第 

</html> 14 
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代码 中 利用 float:left 设置 其 相 邻 的 元 素 (span 相 邻 的 元 素 为 p) 左 对 齐 ， 形 成 的 float 


效果 如 图 14-2 所 示 。 








eee En] file.J|JUsers/mac/Desktop/fFXk/HTMLSSR/Code/16-21Chapie — © o0 5 8 
[renter gts] Font Earle E| 


N 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 


在 上 面 的 段落 中 , 第 一 个 字典 入 在 span 元 素 中 。 这 个 span 元 素 的 宽度 是 当前 字体 大 小 的 12 倍 。 这 个 span 元 素 是 当前 字体 的 400%( 相 当 大 )， line-height 为 80%。 文字 的 
字体 为 "Algerian"。 


本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 
一 些 文本 。 这 是 一 些 文本 。 





图 14-2 float 效果 


14.3 align 属性 


1. 定义 和 用 法 
align 属性 规定 div 元 素 中 内 容 的 水 平 对 齐 方式 。 


2. 浏览 器 支持 
所 有 的 浏览 器 都 支持 align 属性 。 
3. 语法 


<div align="value"> 


4. 属性 值 
CSS align 属性 值 如 表 14-4 所 示 。 


表 14-4 CSS align 属性 值 





值 描述 

left 左 对 齐 内 容 

right 右 对 齐 内 容 

center 居中 对 齐 内 容 

justify 对 行进 行 伸展 ， 这 样 每 行 都 可 以 有 相等 的 长 度 〈 就 像 在 报纸 和 杂志 中 ) 


5. 实例 
文档 中 的 一 个 部 分 居中 对 齐 。 





<div align="center"> 
This is some text! 
</div> 


1. CSS 有 几 种 定位 属性 ? 
2. 什么 是 CSS float 属性 ? 它 有 什么 功能 ? 
3. 什么 是 CSS align 属性 ? 它 有 什么 功能 ? 
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通过 CSS3 可 以 创建 动画 ， 这 可 以 在 许多 网 页 中 取代 动画 图 片 、Flash 动画 以 及 


JavaScript. 


15.1 什么 是 CSS3 中 的 动画 


动画 是 使 元 素 从 一 种 样式 逐渐 地 变化 为 另 一 种 样式 的 效果 ， 可 以 改变 任意 多 的 样式 和 
任意 多 的 次 数 。 请 用 百分比 来 规定 变化 发 生 的 时 间 ， 或 用 关键 词 "from" A "to", SEF 
0% 和 10096. 0% 是 动画 的 开始 ，100% 是 动画 的 完成 。 为 了 得 到 最 佳 的 浏览 器 支持 ， 应 
始终 定义 0% 和 100% 选择 器 。 

下 面 的 实例 动画 为 25% 和 50% 时 改变 背景 色 ， 然 后 当 动 画 100% 完 成 时 再 次 改变 。 


@keyframes myfirst 

f 

0$ (background: red; } 
25$ (background: yellow; } 
50$ (background: blue; } 
100% (background: green;] 
} 


G-moz-keyframes myfirst /* Firefox */ 
{ 

0$ (background: red; } 

25$ (background: yellow; } 

50$ (background: blue;] 

100% (background: green; } 

} 


@-webkit-keyframes myfirst /* Safari 和 Chrome */ 
t 

02 (background: red; } 

25$ (background: yellow; } 

50$ (background: blue; } 

100% (background: green; } 

} 


@-o-keyframes myfirst /* Opera */ 
t 

0$ (background: red;] 

25$ (background: yellow;] 

50$ (background: blue;] 

100% (background: green;] 

J 


下 面 给 出 一 个 可 以 同时 改变 背景 色 和 位 置 的 动画 。 


@keyframes myfirst 

{ 

0% (background: red; left:0px; top:0px;} 

25$ (background: yellow; left:200px; top:O0px;} 
50$ (background: blue; left:200px; top:200px;] 
75$ (background: green; left:0px; top:200px;) 
100% (background: red; left:0px; top:Opx;) 

} 


@-moz-keyframes myfirst /* Firefox */ 

t 

0% (background: red; left:0px; top:0px;} 

25$ (background: yellow; left:200px; top:0px;} 
50$ (background: blue; left:200px; top:200px;} 
75$ (background: green; left:0px; top:200px;} 
100% (background: red; left:0px; top:O0px;] 

} 


@-webkit-keyframes myfirst /* Safari 和 Chrome */ 


0% (background: red; left:0px; top:0px;} 

25$ (background: yellow; left:200px; top:0px;} 
50$ (background: blue; left:200px; top:200px;} 
75$ (background: green; left:0px; top:200px;} 
100% (background: red; left:0px; top:0px;} 

} 


@-o-keyframes myfirst /* Opera */ 

t 

0% (background: red; left:0px; top:0px;} 

25% (background: yellow; left:200px; top:0px;} 
50$ (background: blue; left:200px; top:200px;] 


CSS3 AE A EA 


第 
15 
章 


HIML5+CSS3+JavaScript P] RREt+E AFA 





75$ (background: green; left:0px; top:200px;} 
100% (background: red; left:0px; top:0px;} 
} 


15.2 CSS3 &@keyframes 规则 





如 需 在 CSS3 中 创建 动画 ， 则 需要 学 习 @keyframes 规则 。 在 @keyframes 中 规定 某 
项 CSS 样式 ， 就 能 创建 由 当前 样式 逐渐 改 为 新 样式 的 动画 效果 。 

当 在 @keyframes 中 创建 动画 时 , 请 把 它 捆绑 到 某 个 选择 器 , 否则 将 不 会 产生 动画 效果 。 
通过 至 少 规定 以 下 两 项 CSS3 动画 属性 ， 才 可 将 动画 绑 定 到 选择 器 。 

。 规定 动画 的 名 称 ; 

e 规定 动画 的 时 长 。 

把 “myfirst” 动 画 捆绑 到 div 元 素 ， 时 长 为 5s。 

div 

{ 

animation: myfirst 5s; 

-moz-animation: myfirst 5s; /* Firefox */ 

-webkit-animation: myfirst 5s; /* Safari 和 Chrome */ 

-o-animation: myfirst 5s; /* Opera */ 

) 


注意 : 必须 定义 动画 的 名 称 和 时 长 。 如 果 和 忽略 时 长 ， 则 动画 不 会 允许 ， 因 为 时 长 的 默 
认 值 是 0。 


@keyframes 实例 完整 代码 见 代 码 15-1。 
代码 1S-1 


<!DOCTYPE html» 

«html» 

<head> 

<style> 

div 

{ 

width: 100px; 

height: 100px; 

background: red; 

animation:myfirst 5s; 
-moz-animation:myfirst 5s; /* Firefox */ 
-webkit-animation:myfirst 5s; /* Safari and Chrome */ 
-o-animation:myfirst 5s; /* Opera */ 

} 


@keyframes myfirst 

{ 

from {background: red; } 
to {background: yellow; } 
} 


G-moz-keyframes myfirst /* Firefox */ 
t 

from {background: red; } 

to {background: yellow; } 

H 


G-webkit-keyframes myfirst /* Safari and Chrome */ 
t 

from {background: red; } 

to {background: yellow; } 

} 


@-o-keyframes myfirst /* Opera */ 
t 

from {background: red; } 

to {background: yellow; } 

} 

</style> 

</head> 

<body> 


<div></div> 
<p><b> 注 释 : </b> 本 例 在 Internet Explorer 中 无 效 。</p> 


</body> 

</html> 

随 着 时 间 的 变化 ， 可 以 发 现 网 页 中 的 div 元 素颜 色 在 逐渐 变化 。 渐 变 效果 如 图 15-1~ 
图 15-3 所 示 。 





注释 : 本 例 在 Internet Explorer 中 无 效 。 注释 : 本 例 在 Internet Explorer 中 无 效 。 


图 15-1 第 Os 动画 图 15-2 第 2s 动画 
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注释 : 本 例 在 Internet Explorer 中 无 效 。 
图 15-3 第 Ss 动画 
153 CSS3 动画 属性 


表 15-1 列 出 了 @keyframes 规则 和 所 有 动画 属性 。 
表 15-1 CSS3 动画 属性 


属性 描述 CSS 版 本 

@keyframes 规定 动画 CSS3 

animation 所 有 动画 属性 的 简写 属性 ， 除 了 CSS3 
animation-play-state 属性 

animation-name 规定 @keyframes 动画 的 名 称 CSS3 

animation-duration 规定 动画 完成 一 个 周期 所 消耗 的 时 间 《〈 秘 或 毫 CSS3 
秒 )。 默 认 是 0 

animation-timing-function 规定 动画 的 速度 曲线 。 默 认 是 "ease" CSS3 

animation-delay 规定 动画 何 时 开始 。 默 认 是 0 CSS3 

animation-iteration-count 规定 动画 被 播放 的 次 数 。 默 认 是 1 CSS3 

animation-direction 规定 动画 是 否 在 下 一 周期 逆向 地 播放 。 默 认 是 CSS3 
"normal" 

animation-play-state 规定 动画 是 否 正在 运行 或 暂停 。 默 认 是 CSS3 
"running" 

animation-fill-mode 规定 对 象 动画 时 间 之 外 的 状态 CSS3 


15.4 CSS 动画 实例 


下 面 的 例子 运行 名 为 myfirst 的 动画 ， 同 时 使 用 了 简写 的 动画 animation 属性 ， 见 代 
#4, 15-2. 
代码 15-2 


<!DOCTYPE html» 
<html> 

<head> 

<style> 

div 


{ 

width: 100px; 

height: 100px; 

background: red; 

position:relative; 

animation:myfirst 5s linear 2s infinite alternate; 
} 


@keyframes myfirst 

{ 

0% {background:red; left:0px; top:0px;} 

25% {background:yellow; left:200px; top:0px;} 
50$ {background:blue; left:200px; top:200px;] 
75$ {background:green; left:0px; top:200px;} 
100% {background:red; left:0px; top:0px;} 

} 


</style> 

</head> 

<body> 

<p><b> 注 释 : </b> 本 例 在 Internet Explorer "PALM. </p> 


<div></div> 


</body> 


可 以 发 现 ，div 元 素 按照 myfirst 规定 的 运行 方式 展示 了 CSS 动画 。 初 始 动画 如 图 15-4 
所 示 ， 动 画 效果 如 图 15-5 所 示 。 





TERE: 本 例 在 Internet Explorer 中 无 效 。 注释 本 例 在 Internet Explorer 中 无 效 。 


图 15-4 初始 化 动画 图 15-5 动画 效果 


15.5 ”响应 式 布局 简介 


响应 式 布局 ， 是 当前 很 流行 的 一 个 设计 理念 。 随 着 移动 互联 网 的 盛行 ， 为 解决 如 今 各 | 第 
式 各 样 的 浏览 器 分 辨 率 以 及 不 同 移动 设备 具有 不 同 的 显示 效果 的 问题 ， 设 计 师 提出 了 响应 | 15 
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式 布局 的 设计 方案 。 接 下 来 的 内 容 包含 什么 是 响应 式 布 局 、 响 应 式 布局 的 优点 和 缺点 以 及 
响应 式 布局 该 怎么 设计 〈 通 过 CSS3 Media Query 实现 响应 布局 )。 

1. 响应 式 布局 介绍 

响应 式 即 浏览 器 内 容 会 随 着 设备 的 特性 自动 展示 为 不 同 的 网 页 效果 的 技术 解决 方案 。 
简 而 言 之 ， 就 是 一 个 网 站 能 够 兼容 多 个 终端 ， 而 不 是 为 每 个 终端 都 做 一 个 特定 的 版 本 。 这 
个 概念 是 为 解决 移动 互联 网 浏览 而 提出 的 。 

2. 响应 式 布 局 的 优点 

面 对 不 同 分 辩 率 设备 ， 响 应 式 布局 具有 较 强 的 灵活 性 ， 能 够 快速 地 解决 多 设备 的 显示 
适应 问题 ， 根 据 不 同 的 显示 器 ， 调 整 设计 最 适合 用 户 浏 览 的 页 面 。 

3. 陶 应 式 布 局 的 缺点 

兼容 各 种 设备 工作 量 大 ， 效 率 低下 。 受 代码 累 袭 ， 会 出 现 隐 藏 无 用 的 元 素 ， 加 载 时 间 
加 长 等 多 方面 因素 影响 而 达 不 到 最 佳 效果 ， 一 定 程度 上 改变 了 网 站 原 有 的 布局 结构 ， 会 出 
现 用 户 混淆 的 情况 。 其 实 这 是 一 种 折 中 性 质 的 设计 解决 方案 。 

4. 响应 式 布 局 的 运用 方法 

* media query 

通过 不 同 的 媒体 类 型 和 条 件 ， 定 义 样 式 表 规则 。 媒 体 查 询 让 CSS 可 以 更 精确 地 作用 于 
不 同 的 媒体 类 型 和 同一 媒体 的 不 同 条 件 。 

。 语法 结构 及 用 法 

(Qmedia 设备 名 only (选取 条 件 )、not〔 选 取 条 件 )、and (设备 选取 条 件 )， 设 备 二 
{sRules} 

(1) 在 link 中 使 用 @media 





<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)"> 


(2) ERKE A (media 


@media screen and (min-width: 600px) { 
.one( 
border:lpx solid red; 
height:100px; 
width: 100px; 
} 


} 


通过 上 述 代码 可 知 ， 它 是 通过 @media 媒介 查询 判断 来 执行 的 CSS 样式 ， 即 如 果 要 做 
-个 响应 式 布局 网 站 ， 同 时 兼容 手机 、 平 板 、PC 时 ， 则 需要 写 三 个 与 之 对 应 的 CSS 样式 
来 实现 ， 通 过 @media 媒介 查询 来 完成 响应 式 布局 。 

值得 注意 的 是 ， 在 手机 设备 上 ， 要 禁止 用 户 缩放 屏幕 。 如 果 不 禁 止 ， 则 可 能 会 造成 显 
示 错 位 ， 以 及 显示 的 不 是 手机 网 站 的 样式 。 因 此 ， 要 通过 代码 来 禁止 用 户 在 手机 端 上 缩放 
屏幕 ， 以 达到 正常 的 手机 网 站 效果 。 

禁止 代码 如 下 : 


«meta name-"viewport" content-"width-device-width; initial-scale-1.0"» 


加 在 头 部 Chead) 标签 里 。 
15.6 viewpoint 


1. {t4 viewport 
viewport 是 用 户 网 页 的 可 视 区 域 。viewport 翻译 成 中 文 可 以 叫 作 “ 视 区 ”。 手 机 浏览 器 
是 把 页 面 放 在 一 个 虚拟 的 “窗口 ”(viewport) 中 ， 通 常 这 个 虚拟 的 “窗口 ”(viewport) 比 
屏幕 宽 ， 这 样 就 不 用 把 每 个 网 页 挤 到 很 小 的 窗口 中 ， 但 这 样 会 破坏 没有 针对 手机 浏览 器 优 
化 的 网 页 的 布局 ， 用 户 可 以 通过 平移 和 缩放 来 看 网 页 的 不 同 部 分 。 
2. 设置 viewport 
-个 常用 的 针对 移动 网 页 优化 过 的 页 面 的 viewport meta 标签 大 致 如 下 : 

















<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


e width: 控制 viewport 的 大 小 ， 可 以 指定 的 一 个 值 。 如 果 600 或 者 特殊 的 值 ， 如 
device-width 为 设备 的 宽度 (单位 为 缩放 为 100% 时 的 CSS 的 像素 )。 

height: 与 width 相对 应 ， 指 定 高 度 。 

initial-scale: 初始 缩放 比例 ， 也 就 是 当 页 面 第 一 次 load 的 时 候 缩放 比例 。 
maximum-scale: 允许 用 户 缩放 到 的 最 大 比例 。 

minimum-scale: 允许 用 户 缩放 到 的 最 小 比例 。 

user-scalable: 用 户 是 否 可 以 手动 缩放 。 


15.7 网 格 视 


很 多 网 页 都 是 基于 网 格 设计 的 ， 这 说 明 网 页 是 按 列 来 布局 的 。 使 用 网 格 视图 有 助 于 设 
计 网 页 ， 这 让 向 网 页 添加 元 素 变 得 更 简单 ， 网 格 视图 如 图 15-6 所 示 。 





图 15-6 网 格 视图 
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响应 式 网 格 视图 通常 是 12 列 ， 宽 度 为 100%， 在 浏览 器 窗口 大 小 调整 时 会 自动 伸缩 。 

1. 创建 响应 式 网 格 视图 

接 下 来 创建 一 个 响应 式 网 格 视 图 。 首 先 确保 所 有 的 HTML 元 素 有 box-sizing 属性 且 设 
置 为 border-box。 确 保 边 距 和 边框 包含 在 元 素 的 宽度 和 高 度 间 。 添 加 如 下 代码 : 


*1 
box-sizing: border-box; 
} 


以 下 实例 演示 了 简单 的 响应 式 网 页 ， 包 含 两 列 。 


-menu { 
width: 25%; 
float: left; 
} 
.main { 
width: 75%; 
float: left; 
} 


相对 于 2 Fi, 12 列 的 网 格 系统 可 以 更 好 地 控制 响应 式 网 页 。 首 先 可 以 计算 每 一 列 的 
百分比 : 100%/12 列 =8.33%。 在 每 列 中 指定 class, class="col-" 用 于 定义 每 列 有 几 个 


span. 


.col-1 (width: 8.33%;} 
-col-2 (width: 16.66%;} 
.col-3 (width: 25%;} 
-col-4 (width: 33.33%;} 
-col-5 (width: 41.66%;} 
.col-6 (width: 50%;} 
.col-7 (width: 58.33$;] 
.col-8 (width: 66.66%;} 
.col-9 (width: 75%;} 
-col-10 (width: 83.33%;} 
-Col-11 (width: 91.66%;} 
-col-12 (width: 100%;} 


所 有 的 列 向 左 浮动 ， 间 距 (padding) 为 13px。 可 以 添加 一 些 样式 和 颜色 ， 让 其 变 得 更 


html { 

font-family: "Lucida Sans", sans-serif; 
} 
.header { 

background-color: #9933cc; 

color: #ffffff; 


padding: 15px; 

} 

.menu ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 

} 

.menu li { 
padding: 8px; 
margin-bottom: 7px; 
background-color: #33b5e5; 
color: #f£fffff; 
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 

} 

-menu li:hover { 
background-color: #0099cc; 


完整 代码 如 代码 15-3. 
代码 15-3 


<!DOCTYPE html» 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
«meta charset-"utf-8"» 
<title> 响 应 式 实例 </title> 
<style> 
+ 
box-sizing: border-box; 
} 
.row:after { 
content: ""; 
clear: both; 
display: block; 
} 
[class*-"col-"] { 
float: left; 
padding: 15px; 
} 
-col-1 {width: 8.33%;} 
-col-2 (width: 16.66%;} 
-col-3 (width: 25%;} 
-col-4 (width: 33.33%;} 
-col-5 (width: 41.66%;} 
-col-6 (width: 50%;} 
-col-7 (width: 58.33%;} 
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-col-8 (width: 66.66%;} 
-col-9 (width: 75%;} 
-col-10 {width: 83.33%;} 
-Col-11 (width: 91.66%;} 
-col-12 (width: 100%;} 
html { 
font-family: "Lucida Sans", sans-serif; 
} 
.header { 
background-color: #9933cc; 
color: #f£fffff; 
padding: 15px; 
} 
.menu ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 
.menu li { 
padding: 8px; 
margin-bottom: 7px; 
background-color: #33b5e5; 
color: #ffffff; 
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.menu li:hover { 
background-color: #0099cc; 
} 
</style> 
</head> 
<body> 


<div class="header"> 
<h1>Chania</h1> 
</div> 


<div class="row"> 


<div class-"col-3 menu"> 
<ul> 

<li>The Flight</li> 
<li>The City</li> 
<li>The Island</li> 
<li>The Food</li> 

</ul> 





</div> 


<div class="col-9"> 

<hl>The City</hl1> 

<p>Chania is the capital of the Chania region on the island of Crete. The 
city can be divided in two parts, the old town and the modern city.</p> 
<p>Resize the browser window to see how the content respond to the 
resizing.</p> 

</div> 


</div> 
</body> 
</html> 


最 终 的 响应 式样 例 显示 效果 如 图 15-7 所 示 。 


e 
e. 
日 
p 
a 


file:J/JUsersjmac/Desktop/fENV/HTMLHSR/Code/16-21Chapts; © o 
哆 应 式 实例 





Chania 


The City 
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and 
The Island the modem city. 


esie the browser window to soe how the content respon tothe resting. 





图 15-7 最 终 的 响应 式 设计 样 例 显示 效果 


谈 谈 对 CSS3 @keyframes 的 理解 。 

CSS 动画 属性 中 animation-play-state 有 什么 含义 ? 
响应 式 网 页 的 优 缺 点 是 什么 ? 

什么 是 viewport? 


Aot 王 
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161 CSS 书写 格式 


1. 文件 
。 建议 : 
CSS 文件 使 用 无 BOM 的 UTF-8 编码 。 
2. git 
。 建议 : 


使 用 四 个 空格 作为 一 个 缩 进 层级 ， 不 允许 使 用 两 个 空格 或 tab 字符 。 
示例 : 
.Selector { 

margin: 0; 

padding: 0; 


3 

3. 空格 

。 建议 : 

选择 器 与 {之 间 必 须 包 含 空 格 。 
示例 : 


.Selector { 


} 

。 建议 : 

选择 器 与 { 之 间 必 须 包 含 空 格 。 
示例 : 


margin: 0; 


* 建议 : 
列表 性 属性 书写 在 单行 时 ， 后 必须 跟 一 个 空格 。 
示例 : 


font-family: Aria, sans-serif; 


4. KE 
每 行 不 得 超过 120 个 字符 ， 除 非 单行 不 可 分 割 。 


* 建议 : 

对 于 超 长 的 样式 ， 在 样式 值 的 空格 处 或 ， 后 换行 ， 建 议 按 逻辑 分 组 。 
示例 : 

/* 不 同属 性 值 按 逻辑 分 组 */ 

background: 


transparent url (aVeryVeryVeryLongUrlIsPlacedHere) 
no-repeat 0 0; 


/* 可 重复 多 次 的 属性 ， 每 次 重复 一 行 */ 
background-image: 

url (aVeryVeryVeryLongUrlIsPlacedHere) 

url (anotherVeryVeryVeryLongUrlIsPlacedHere) ; 


/* 类 似 函 数 的 属性 值 可 以 根据 函数 调用 的 缩 进 进行 */ 
background-image: -webkit-gradient( 
linear, 
left bottom, 
left top, 
color-stop(0.04, rgb(88,94,124)), 
color-stop(0.52, rgb(115,123,162)) 
); 


5. 选择 器 

。 建议 : 

当 一 个 rule 包含 多 个 selector 时 ， 每 个 选择 器 声明 必须 独占 一 行 。 
示例 : 


/* good */ 

.post, 

.page, 

.comment ( 
line-height: 1.5; 

} 


/* bad */ 

-post, .page, .comment { 
line-height: 1.5; 

j 


2 建议 : 
>、+、~ 选 择 器 的 两 边 各 保留 一 个 空格 。 第 
示例 : 16 
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/* good */ 

main » nav ( 
padding: 10px; 

} 


label + input { 
margin-left: 5px; 
} 


input:checked ~ button { 
background-color: #69C; 
} 


/* bad */ 
main»nav ( 
padding: 10px; 


label+input ( 
margin-left: 5px; 


input:checked-button ( 
background-color: #69C; 

] 

€ 建议 : 

属性 选择 器 中 的 值 必须 加 双 引 号 。 

示例 : 

css 

/* good */ 

article[character="juliet"] { 


voice-family: "Vivien Leigh", victoria, female 
j 
/* bad */ 
article[character-'juliet'] ( 


voice-family: "Vivien Leigh", victoria, female 
} 


16.2 ”选择 器 与 属性 缩写 


16.2.1 选择 器 


。 建议 : 
如 无 必要 ， 不 得 为 4、class 选择 器 添加 类 型 选择 器 进行 限定 。 


解释 : 
在 性 能 和 维护 性 上 ， 都 有 一 定 的 影响 。 
示例 : 


css 

/* good */ 

#error, 

-danger-message { 
font-color: #c00; 


/* bad */ 
dialogferror, 
p.danger-message ( 

font-color: #c00; 
) 


. 建议 : 

选择 器 的 嵌 套 层级 应 不 大 于 三 级 ， 位 置 靠 后 的 限定 条 件 应 尽 可 能 精确 。 
示例 : 

/* good */ 


#username input {} 
-comment .avatar {} 


/* bad */ 
.page .header .login #username input {} 
.comment div * {} 


1622 属性 缩写 


。 建议 : 
在 可 以 使 用 缩写 的 情况 下 ， 尽 量 使 用 属性 缩写 。 
示例 : 


/* good */ 
-post { 

font: 12px/1.5 arial, sans-serif; 
} 


/* bad */ 

-post { 
font-family: arial, sans-serif; 
font-size: 12px; 
line-height: 1.5; 
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- 建议 : 

使 用 border. margin. padding 等 缩写 时 ， 应 注意 隐 含 值 对 实际 数值 的 影响 ， 需 要 设置 
多 个 方向 的 值 时 才 使 用 缩写 。 

解释 : 

border, margin, padding 等 缩写 会 同时 设置 多 个 属性 的 值 ， 容 易 履 盖 不 需要 履 盖 的 设 
定 。 如 某 些 方向 需要 继承 其 他 声明 的 值 ， 则 应 该 分 开设 置 。 

示例 : 


/* centering <article class="page"> horizontally and highlight featured ones */ 
article { 

margin: 5px; 

border: lpx solid #999; 


/* good */ 

«page ( 
margin-right: auto; 
margin-left: auto; 


.featured { 
border-color: #69c; 


/* bad */ 


-page { 
margin: 5px auto; /* introducing redundancy */ 


.featured { 
border: lpx solid #69c; /* introducing redundancy */ 


16.2.3 #4T 


。 建议 : 
每 个 规则 集 之 间 保 留 一 个 空 行 。 
示例 : 


/* good */ 

-selectorl { 
display: block; 
width: 100px; 


} 

.selector2 { 
padding: 10px; 
margin: 10px auto; 


/* bad */ 

-selectorl { 
display: block; 
width: 100px; 


-selector2 { 
padding: 10px; 
margin: 10px auto; 


16.3 值 与 单位 


16.3.1 文本 


e 建议 : 

文本 内 容 必须 加 双 引 号 。 

解释 : 

文本 类 型 的 内 容 可 能 在 选择 器 、 属 性 值 等 内 容 中 。 
示例 : 

/* good */ 


html[lang|-"zh"] q:before { 
font-family: "Microsoft YaHei", sans-serif; 
content: """; 


html[lang|-"zh"] q:after ( 
font-family: "Microsoft YaHei", sans-serif; 
content: """; 


/* bad */ 
html[lang|-zh] q:before ( 
font-family: 'Microsoft YaHei', sans-serif; 
content: '"'; 
第 
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html[lang|-zh] q:after ( 
font-family: "Microsoft YaHei", sans-serif; 
Content; "ww; 


16.3.2 数值 


。 建议 : 

当 数 值 为 0 一 1 之 间 的 小 数 时 ， 省 略 整数 部 分 的 0。 
示例 : 

/* good */ 

panel { 


opacity: .8 
} 
/* bad */ 
panel { 
opacity: 0.8 
} 


16.3.3 url( 


。 建议 : 
url0 函数 中 的 路 径 不 加 引号 。 
示例 : 


body { 
background: url (bg.png); 
} 


16.3.4 Ke 


。 建议 : 
长 度 为 0 时 ， 须 省 略 单位 〈 也 只 有 长 度 单位 可 省 )。 
示例 : 


/* good */ 
body { 

padding: 0 5px; 
} 


/* bad */ 
body { 
padding: 0px 5px; 


16.3.5 颜色 


。 建议 : 
RGB 颜色 值 必须 使 用 十 六 进 制 记号 形式 #rggbb。 不 允许 使 用 rgb0。 
/* good */ 


-success { 
box-shadow: 0 0 2px rgba(0, 128, 0, .3); 
border-color: #008000; 


/* bad */ 

-success { 
box-shadow: 0 0 2px rgba(0,128,0,.3); 
border-color: rgb(0, 128, 0); 

} 


. 建议 : 

当 颜 色 值 可 以 缩写 时 ， 必 须 使 用 缩写 形式 。 
示例 : 

/* good */ 


-success { 


background-color: #aca; 


/* bad */ 
.Success { 


background-color: #aaccaa; 
H 


。 建议 : 
颜色 值 不 允许 使 用 命名 色 值 。 
示例 : 


/* good */ 
.Success { 
color: #90ee90; 


/* bad */ 
-success { 

color: lightgreen; 
} 


。 建议 : 
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颜色 值 中 的 英文 字符 采用 小 写 。 如 不 用 小 写 ， 也 需要 在 同一 项 目 内 保证 大 小 写 一 致 。 
示例 : 

/* good */ 

.Success { 


background-color: #aca; 
color: #90ee90; 





} 


/* good */ 

.Success { 
background-color: #ACA; 
color: #90EE90; 

} 


/* bad */ 

.success { 
background-color: #ACA; 
color: #90ee90; 

} 


16.3.6 2D 位 置 


。 建议 : 
必须 同时 给 出 水 平和 垂直 方向 的 位 置 。 
解释 : 


2D 位 置 初始 值 为 0% 0%， 但 在 只 有 一 个 方向 的 值 时 ， 另 一 个 方向 的 值 会 被 解析 为 
center。 为 避免 理解 上 的 困扰 ， 应 同时 给 出 两 个 方向 的 值 。 

示例 : 

/* good */ 


body { 
background-position: center top; /* 50% 0% */ 


} 
/* bad */ 


body { 
background-position: top; /* 50% 0% */ 


} 


16.4 文本 编排 


16.4.1 字体 族 


。 建议 : 
font-family 属性 中 的 字体 族 名 称 应 使 用 字体 的 英文 Family Name， 其 中 如 有 空格 ， 


S 


gr 


放置 在 引号 中 。 
解释 : 
所 谓 英文 Family Name， 为 字体 文件 的 一 个 元 数据 ， 字 体 族 常见 名 称 如 表 16-1 所 示 。 


表 16-1 字体 族 常见 名 称 














字体 操作 系统 Family Name 
宋体 〈 中 易 宋体 ) Windows SimSun 
黑体 〈 中 易 黑 体 ) Windows SimHei 
Windows Microsoft YaHei 
Windows Microsoft JhengHei 
Mac/iOS STHeiti 
Mac/iOS Hiragino Sans GB 
Linux WenQuanYi Zen Hei 
Linux WenQuanYi Micro Hei 
示例 : 
hl { 


font-family: "Microsoft YaHei"; 
} 
° 建议 : 
font-family 按 「 西 文字 体 在 前 、 中 文字 体 在 后 ]、[ 效 果 佳 ( 质 量 高 /更 能 满足 需求 ) 的 
字体 在 前 、 效 果 一 般 的 字体 在 后 」 的 顺序 编写 ， 最 后 必须 指定 一 个 通用 字体 族 
(serif / sans-serif) 。 
示例 : 


/* Display according to platform */ 
-article { 
font-family: Arial, sans-serif; 


/* Specific for most platforms */ 


hl { 
font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi 


Micro Hei", "Microsoft YaHei", sans-serif; 
} 
。 建议 : 
font-family 不 区 分 大 小 写 ， 但 在 同一 个 项 目 中 ， 同 一 含义 的 Family Name 大 小 写 必须 
统一 


示例 : 
/* good */ 
第 
body { 
font-family: Arial, sans-serif; 16 
章 


RGAE 


HIML5+CSS3+JavaScript P] RRA #E AFA 





} 


hl { 
font-family: Arial, "Microsoft YaHei", sans-serif; 
H 


/* bad */ 
body ( 

font-family: arial, sans-serif; 
H 


hl ( 
font-family: Arial, "Microsoft YaHei", sans-serif; 
} 


16.4.2 字号 


。 建议 : 

需要 在 Windows 平台 显示 的 中 文 内 容 ， 其 字号 应 不 小 于 12px。 

解释 : 

由 于 Windows 的 字体 泻 染 机 制 ， 小 于 12px 的 文字 显示 效果 极 差 ， 令 人 难以 辨认 。 


16.4.3 ”字体 风格 


。 建议 : 

需要 在 Windows 平台 显示 的 中 文 内 容 ， 不 要 使 用 除 normal 外 的 font-style， 其 他 平台 
也 应 慎 用 。 

解释 : 

由 于 中 文字 体 没 有 italic 风格 的 实现 ， 所 有 的 浏览 器 都 会 自动 拟 合 为 斜体 ， 小 字号 下 
(特别 是 Windows 平台 在 小 字号 下 ， 使 用 点 阵 字 体 显 示 效 果 差 ， 造 成 阅读 困难 。 


16.4.4 变换 与 动画 


。 建议 : 
使 用 transition 时 应 指定 transition-property。 
示例 : 


/* good */ 
sbox { 

transition: color 1s, border-color 1s; 
} 


/* bad */ 
.box { 

transition: all 1s; 
t 


e. 建议 : 

尽量 在 浏览 器 中 能 高 效 实现 的 属性 上 添加 过 渡 和 动画 。 
解释 : 

在 可 能 的 情况 下 ， 应 选择 以 下 四 种 变换 ; 


e transform: translate(npx, npx); 





e transform: scale(n); 

e transform: rotate(ndeg); 

© opacity: 0..1. 

典型 的 例子 ， 可 以 使 用 translate 代替 left 作为 动画 属性 。 
示例 : 


/* good */ 
-box ( 
transition: transform 1s; 
} 
.box:hover { 
transform: translate(20px); /* move right for 20px */ 


/* bad */ 
.box f 
left: 0; 
transition: left 1s; 
) 
.box:hover { 
left: 20px; /* move right for 20px */ 
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16.5.1 普通 注释 
/* 普通 注释 */ 
16.5.2 区 块 注释 


/** 

* 模块 : m-detail 

* author: xxx 

* edit: 2016.5.02 
*/ 
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16.6 CSS 命名 规范 


16.6.1 命名 组 成 
e 命名 必须 由 单词 、 中 画 线 组 成 。 例 如 :.info、.news-list。 
。 不 推荐 使 用 拼音 作为 样式 名 ， 尤 其 是 缩写 的 拼音 、 拼 音 与 英文 的 混合 。 
。 所 有 命名 都 使 用 小 写 ， 使 用 中 画 线 “-” 作 为 连接 字符 ， 而 不 是 下 画 线 “ U. 
16.6.2 ”命名 前 组 
命名 前 级 规范 如 表 16-2 所 示 。 
表 16-2 ”命名 前 组 规范 











前 级 说 明 示例 
g- 全 局 通用 样式 命名 g-mod 
m- 模块 命名 方式 m-detail 
ui- 组 件 命名 方式 ui-selector 
j- 所 有 用 于 纯 交 互 的 命名 ， 不 涉及 任何 样式 规则 J-switch 


不 允许 出 现 以 类 似 .info、.current、.news 开头 的 选择 器 ， 例 如 : 


-info(sRules;) 

因为 这 样 将 会 带 来 不 可 预知 的 管理 麻烦 以 及 沉重 的 历史 包容 。 对 于 新 人 可 能 会 遭 过 每 
定义 一 个 样式 名 时 都 有 同名 的 样式 已 存在 的 问题 ， 这 时 只 能 是 换 样式 名 或 者 覆盖 规则 。 因 
此 ， 我 们 推荐 这 样 写 : 

.m-xxx .info{sRules;} 

所 有 的 选择 器 必须 是 以 g-、m-、Wi- 等 有 前 级 的 选择 符 开头 ， 即 所 有 的 规则 都 必须 在 某 
个 相对 的 作用 域 下 才 可 生效 ， 尽 可 能 地 减少 全 局 污染 。 丁 这 种 级 别 的 类 名 可 以 完全 交 由 前 
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端 框架 Ser) 自 定义 ， 但 是 命名 的 规则 也 可 以 与 重 构 保 持 一 致 ， 例 如 不 能 使 用 拼音 等 。 
16.7 CSS 模板 使 用 


接 下 来 为 大 家 介绍 响应 式 Web 设计 框架 Bootstrap。Bootstrap 来 自 Twitter, 是 目前 最 
受 欢迎 的 前 端 框架 。Bootstrap 是 基于 HTML. CSS. JavaScript 的 ， 它 具有 简洁 灵活 的 特 
点 ， 使 Web 开发 变 得 更 加 快捷 。 

代码 16-1 提供 一 个 简单 的 Bootstrap 网 站 样 例 。 

代码 16-1 








<!DOCTYPE html» 
<html lang="en"> 


<head> 
<title>Bootstrap Example</title> 
«meta charset-"utf-8"» 
«meta name-"viewport" content-"width-device-width, initial-scale-1"» 





«link rel-"stylesheet" href-"https://apps.bdimg.com/libs/bootstrap/ 
3.3.4/css/bootstrap.min.css"> 
«script  src-"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"» 
«/script» 
<script src-"https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap. 
min.js"></script> 

</head> 

<body> 


<div class="container"> 
<div class="jumbotron"> 
<hl>My First Bootstrap Page</hl> 
<p>Resize this responsive page to see the effect!</p> 
</div> 
<div class="row"> 
<div class="col-sm-4"> 
<h3>Column 1</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris...</p> 
</div> 
<div class="col-sm-4"> 
<h3>Column 2</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris...</p> 
</div> 
<div class="col-sm-4"> 
<h3>Column 3</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris...</p> 
</div> 
</div> 
</div> 


</body> 
</html> 


Bootstrap 网 站 显示 效果 如 图 16-1 所 示 。 可 以 发 现在 头 部 信息 中 包含 了 需要 的 CSS 和 | 第 
Script 文件 ， 这 些 文件 都 是 从 服务 器 上 获取 的 。 值 得 注意 的 是 ，Bootstrap 需要 与 Jauery 配 | 46 
章 

AZAA 


HIML5+CSS3+JavaScript P] KEE AF 








eoe o file:///Users/mac/Desktop/fFWl/HTML #88 /Code/16-21Chapte) C ojja 


My First Bootstrap Page 


Resize this responsive page to see the effect! 


Column 1 Column 2 Column 3 

Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipisicing 
eit. ei. eit 

Ut enim ad minim veniam, quis nostruc exercitation Ut enim ad minim veniam, quis nostrud exercitation. Ut enim ad minim veniam, quis nostrud exercitation 
ulameo laboris... ullamco laboris. ullamco labors. 





图 16-1 Bootstrap 显示 效果 


CSS 属性 的 缩写 规则 有 哪些 ? 

CSS 值 与 单位 有 什么 代码 规范 和 规定 ? 
请 列举 几 个 常见 的 CSS 字体 族 。 

使 用 CSS 模板 编写 一 个 简单 网 页 。 


本 部 分 小 结 


通过 对 CSS 的 学 习 ， 可 以 用 一 种 更 为 规范 的 方式 来 控制 HTML 元 素 的 变化 ， 并 且 对 
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于 前 端 页 面 的 显示 原理 也 有 了 深入 的 了 解 。 


第 4 部 分 JavaScript 


前 面 读 者 已 经 学 习 到 如 何 使 用 HTML 和 CSS 搭建 美观 规范 的 网 页 前 端 ， 而 真正 给 用 
户 使 用 的 网 页 一 定 缺少 不 了 交互 功能 。JavaScript 则 为 前 端 交互 提供 一 种 最 高 效 、 最 简洁 的 
RAR. 下面 的 内 容 将 会 带领 读者 了 解 JavaScript 这 种 脚本 语言 的 高 级 功能 和 用 法 ， 以 
及 如 何 使 用 JavaScript 来 控制 网 页 的 动态 显示 和 交互 功能 。 

第 17% JavaScript 介绍 

第 18 JavaScript 的 基本 概念 

第 19 章 常用 功能 

第 20 章 ”代码 规范 

第 21 章 JavaScript 样 例 





第 17 章 JavaScript 介绍 
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JavaScript (HJER IS) 是 一 种 轻 量 级 解释 型 的 或 是 JIT 编译 型 的 程序 设计 语言 ， 有 着 头 
等 函数 (First-class Function) 的 编程 语言 。 虽 然 它 是 作为 开发 Web 页 面 的 脚本 语言 而 出 名 
的 ， 但 是 在 很 多 非 浏览 器 环境 中 也 可 以 使 用 JavaScript， 例 如 node.js 和 Apache CouchDB。 
JavaScript 是 一 种 基于 原型 、 多 范式 的 动态 脚本 语言 ， 并 且 支 持 面 向 对 象 、 命 令 式 和 声明 式 
(如 ; 函数 式 编程 ) 编程 风格 。 

为 了 更 好 地 了 解 JavaScript， 需 要 思考 以 下 六 个 问题 。 

。 JavaScript 是 什么 ? 

e JavaScript 的 用 途 是 什么 ? 

* JavaScript 和 ECMAScript 的 关系 是 什么 ? 

* JavaScript 由 哪儿 部 分 组 成 ? 

。 JavaScript 的 执行 原理 是 怎样 的 ? 

。 在 页 面 文 件 中 是 如 何 引 入 JavaScript 文件 的 ? 

对 于 以 上 六 个 问题 我 们 将 逐一 进行 分 析 和 详解 。 

1. JavaScript 的 含义 

JavaScript 是 一 种 Web 前 端的 描述 语言 , 也 是 一 种 基于 对 象 (object) 和 事件 驱动 (Event 
Driven) 的 、 安 全 性 好 的 脚本 语言 。 它 在 客户 端 运行 从 而 可 以 减轻 服务 器 的 负担 。 

JavaScript 的 特点 : 

* JavaScript 主要 用 来 向 HTML 页 面 中 添加 交互 行为 ; 

e JavaScript 是 一 种 脚本 语言 ， 语 法 和 C 语言 系列 语言 的 语法 类 似 ， 属 弱 语 言 类 型 ; 

。 JavaScript 一 般 用 来 编写 客户 端 脚 本 ，nodejs 除外 ; 

。 JavaScript 是 一 种 解释 型 语言 ， 边 执行 边 解释 无 须 男 外 编译 。 

2. JavaScript 的 用 途 

JavaScript 是 用 来 解决 页 面 交互 和 数据 交互 , 其 最 终 目 的 是 丰富 客户 端 效果 以 及 实现 数 
据 的 有 效 传递 。 

€ 实现 页 面 交 互 ， 提 升 用 户 体 验 实现 页 面 特效 。 即 JavaScript 操作 HTML 的 DOM 结 

构 或 操作 样式 。 
。 客户 端 表单 验证 是 在 数据 送 达 服 务 端 之 前 进行 用 户 提交 信息 ， 即 时 有 效 的 验证 ， 从 
而 减轻 服务 器 压力 ， 即 数据 交互 。 





3. JavaScript 5 ECMAScript 之 间 的 关系 

* ECMAScript 是 脚本 程序 设计 语言 的 Web 标准 。 

* JavaScript 和 ECMAScript 的 关系 : 

ECMAScript 是 欧洲 计算 机 制造 商 协会 ， 基 于 美国 网 景 通讯 公司 的 Netscape 发 明 的 
JavaScript 和 Microsoft 公司 随后 模仿 JavaScript 推出 的 JScript 脚本 语言 ， 而 制定 的 
ECMAScript 标准 。 

4. JavaScript 的 组 成 部 分 

JavaScript 组 成 如 图 17-1 所 示 。 


| 


-ECMAScript( 核 心 语法 ) | 





javaScript 浏览 器 对 象 模型 《BOM)》 | 








| 





文档 对 象 模型 (DOM) | 


图 17-1 JavaScript 组 成 


5. JavaScript 的 执行 原理 
JavaScript 的 执行 原理 如 图 17-2 所 示 。 
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图 17-2 JavaScript 的 执行 原理 


6. 在 页 面 文件 中 ， 如 何 引 入 JavaScript 文件 
e 使 用 <script>…,/scrip 亿 标签 。 

e 使 用 外 部 JavaScript 文件 。 

。 直接 在 <html> 标 签 中 。 

使 用 <script>…,/scrip 人 标签 的 语法 : 


第 

<script type="text/JavaScript"> 17 
d 

* 
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//javaScript 语句 ; 
==% 
</script> 


使 用 外 部 JavaScript 文件 示例 代码 : 


<!DOCTYPE html> 
<html> 
<body> 
<script src="myScript.js"></script> 
</body> 
</html> 


172 应 用 场景 


JavaScript 作为 一 个 为 网 页 开发 设计 的 脚本 语言 ， 目 前 还 可 以 应 用 在 众多 方面 。 

1. 网 站 开发 

。 网 站 前 端 开发 

网 站 前 端 开发 是 JavaScript 的 老 本 行 ， 用 来 实现 前 端 逻 辑 ， 例 如 : 单 击 一 个 按钮 会 发 
生 什 么 等 ， 对 于 复杂 的 ， 可 以 用 JavaScript 写 个 x86 模拟 器 再 加 个 Linux 系统 进去 。 

。 网 站 后 端 开 发 

Node.js 让 程序 员 可 以 用 JavaScript 自由 地 写 后 端 了 。 

2. 移动 开发 

e Web APP 

HTMLS 提供 了 很 多 API 支持 ， 可 以 实现 原生 应 用 拥有 的 大 部 分 功能 ， 但 其 性 能 还 有 
待 提高 。 像 Firefox OS 就 是 基于 Web APP 的 移动 操作 系统 。 

。 混合 式 应 用 开发 

将 原生 应 用 的 一 部 分 用 前 端 技术 来 实现 ， 使 原生 应 用 起 来 更 加 灵活 ， 很 多 应 用 都 会 以 
这 样 的 方式 来 实现 。PhoneGap 等 平台 的 出 现 ， 使 得 程序 员 可 以 用 JavaScript 来 进行 移动 应 
用 开发 。 

3. 桌面 开发 
主要 是 指 chrome 等 浏览 器 能 把 JavaScript 写 的 程序 打包 成 桌面 应 用 。Google 力 推 的 
Chrome OS 也 是 基于 Web APP 的 操作 系统 。 

4. 插件 开发 

JavaScript 是 唯一 一 种 能 够 在 所 有 主流 平台 都 被 原生 支持 的 编程 语言 , 因此 在 所 有 主流 
平台 都 可 以 使 用 JavaScript 进行 插件 开发 。 常 见 的 有 浏览 器 插件 和 扩展 程序 ， 同 时 大 部 分 
移动 应 用 的 插件 平台 也 都 是 使 用 JavaScript 进行 插件 开发 的 ， 因 为 一 次 开发 就 可 以 保证 跨 
平台 使 用 。 

几乎 所 有 领域 的 插件 都 可 以 使 用 JavaScript 进行 开发 ， 即 使 现在 做 不 到 ， 以 后 也 会 可 
以 的 。 





























1. 什么 是 JavaScript? 
2. JavaScript 的 执行 原理 是 什么 ? 


第 
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第 18 章 JavaScript 的 基本 概念 





18.1.1 变量 定义 
变量 是 存储 信息 的 容器 。 


var y=3; 
var z-x*y; 


正如 代数 那样 。 


X=2 
y=3 
Z=x+y 
在 代数 中 ， 使 用 字母 〈 如 x) 来 保存 值 (如 2)。 通 过 上 面 的 表达 式 z=xty， 能 够 计算 
的 值 为 5。 在 JavaScript 中 ， 这 些 字母 被 称 为 变量 。 
与 代数 一 样 ，JavaScript 变量 可 用 于 存放 值 〈 如 x=2) 和 表达 式 〈 如 z=x+ty)。 变 量 可 
以 使 用 短 名 称 〈 如 x 和 y)， 也 可 以 使 用 描述 性 更 好 的 名 称 ( 如 age、sum、totalvolume )。 
注意 : 
e 变量 必须 以 字母 开头 ; 
e 变量 也 能 以 8 和 符号 开头 (不 推荐 ); 
e 变量 名 称 对 大 小 写 敏 感 (y 和 了 是 不 同 的 变量 )。 


提示 : JavaScript 语句 和 JavaScript 变量 都 对 大 小 写 敏 感 。 


出 


N 


18.1.2. JavaScript 数据 类 型 


JavaScript 变量 还 可 以 保存 其 他 数据 类 型 ， 例 如 文本 值 (name-"Bill Gates"). 7E 
JavaScript 中 ， 类 似 “Bill Gates” 这 样 的 一 条 文本 被 称 为 字符 串 。JavaScript 变量 有 很 多 种 
类 型 ， 但 目前 只 关注 数字 和 字符 串 。 当 向 变量 分 配 文 本 值 时 ， 应 给 这 个 值 加 双 引 号 或 单 引 号 。 
当 向 变量 赋 的 值 是 数值 时 ， 不 要 加 引号 。 如 果 对 数值 加 上 引号 ， 该 值 将 会 被 作为 文本 来 处 理 。 





var pi=3.14; 


var name="Bill Gates"; 
var answer-'Yes I am!'; 


18.1.3 创建 JavaScript € € 
在 JavaScript 中 ， 创 建 变量 通常 被 称 为 “声明 ”变量 。 使 用 var 关键 词 来 声明 变量 。 
var carname; 
变量 声明 之 后 ， 该 变量 是 空 的 〈 它 没有 值 )。 如 需 向 变量 赋值 ， 请 使 用 等 号 。 
carname="Volvo"; 
不 过 ， 也 可 以 在 声明 变量 时 ， 对 其 赋值 。 
var carname-"Volvo"; 


在 下 面 的 例子 中 ， 创 建 了 名 为 camame 的 变量 ， 并 向 其 赋值 "Volvo"， 然 后 将 其 放 入 
id="demo" 的 HTML 段落 中 。 


<p id="demo"></p> 
var carname="Volvo"; 


document .getElementById ("demo") . innerHTML=carname; 

可 以 在 一 条 语句 中 声明 很 多 变量 。 该 语句 以 var 开头 ， 并 使 用 逗号 分 隔 变量 即 可 。 

var name="Gates", age=56, job="CEO"; 

声明 也 可 横 跨 多 行 。 

Var name="Gates", 

age=56, 

job="CEO"; 

在 计算 机 程序 中 ， 经 常会 声明 无 值 的 变量 。 未 使 用 值 来 声明 的 变量 ， 其 值 实际 上 是 
undefined。 在 执行 以 下 语句 后 ， 变 量 camame 的 值 将 是 undefined. 


var carname; 


如 果 重 新 声明 JavaScript 变量 ， 该 变量 的 值 不 会 丢失 。 在 以 下 两 条 语句 执行 后 ， 变 量 
carname 的 值 依然 是 "Volvo"。 





var carname="Volvo"; 


var carname; 
可 以 通过 JavaScript 变量 来 实现 ， 使 用 的 是 “=” 和 “+” 这 类 的 运算 符 。 


y-5; 
x-y*2; 
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脚本 语言 的 变量 经 常 需要 声明 ， 在 任何 一 个 全 局 位 置 声明 的 变量 都 是 等 价 的 ， 一 般 情 
况 下 ,不 要 建立 同名 的 JavaScript 变量 ， 在 一 个 项 目 中 ， 使 用 不 同名 字 的 JavaScript 变量 能 
充分 发 挥 脚本 语言 简单 快捷 的 优势 ， 又 避 开 了 变量 定义 灵活 ， 容 易 产 生 歧 义 的 弱点 。 
18.1.4 XE AR 


。 局 部 JavaScript 变量 

在 JavaScript 函数 内 部 声明 的 变量 (使 用 var) 是 局 部 变量 ， 所 以 只 能 在 函数 内 部 访 
问 (该 变量 的 作用 域 是 局 部 的 )。 可 以 在 不 同 的 函数 中 使 用 相同 名 称 的 局 部 变量 ， 因 为 只 有 
声明 过 该 变量 的 函数 ， 才 能 识别 出 该 变量 。 只 要 函数 运行 完毕 ， 本 地 变量 就 会 被 删除 。 

。 全 局 JavaScript 变量 

在 函数 外 声明 的 变量 是 全 局 变量 ， 网 页 上 所 有 的 脚本 和 函数 都 能 访问 它 。 

* JavaScript 变量 的 生存 期 

JavaScript 变量 的 生命 期 是 从 它们 被 声明 的 起 始 时 间 来 算 的 。 局 部 变量 会 在 函数 运行 
后 被 删除 。 全 局 变量 将 在 页 面 关 闭 后 被 删除 。 

。 向 未 声明 的 JavaScript 变量 分 配 值 

如 果 把 值 赋 给 尚未 声明 的 变量 ， 则 该 变量 将 被 自动 作为 全 局 变量 声明 。 这 条 语句 : 

















carname="Volvo"; 


声明 一 个 全 局 变量 camame， 即 可 以 使 其 在 函数 内 执行 。 
18.2 JavaScript 保留 关键 字 


JavaScript 的 保留 关键 字 不 可 以 用 作 变 量 、 标 签 或 者 函数 名 。 有 些 保 留 关键 字 是 
JavaScript 以 后 扩展 使 用 。 了解 关 键 字 可 以 间接 地 了 解 JavaScript 提供 了 哪些 基本 语法 和 功 
fig, JavaScript 保留 关键 字 如 表 18-1 所 示 。 


表 18-1 JavaScript 保留 关键 字 


abstract arguments boolean break byte 

case catch char class* const 
continue debugger default delete do 

double else enum* eval export* 
extends* false final finally float 

for function goto if implements 
import* in instanceof int interface 
let long native new null 
package private protected public return 

short static super* switch synchronized 
this throw throws transient true 

try typeof var void volatile 
while with yield 


* 标记 的 关键 字 是 ECMAScript5 中 新 添加 的 。 


18.3.1 


函数 语法 


函数 是 由 事件 驱动 的 ， 或 者 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 。 


<!DOCTYPE html» 
<html> 

<head> 

<script> 


function myFunction () 


{ 


} 
</s 
</h 


alert ("Hello World!"); 


cript> 
ead> 


<body> 


<bu 
</b 
</h 


tton onclick="myFunction()">Try it</button> 
ody» 
tml» 


PROCLUS GE dE K G rp FRE, muri fH TXE] function. 


fun 
t 


ction functionname() 


执行 代码 


) 


当 调用 该 函数 时 ， 会 执行 函数 内 的 代码 。 可 以 在 某 事件 发 生 时 直接 调用 函数 〈 例 如 当 
用 户 单 击 按钮 时 )， 并 且 可 由 JavaScript 在 任何 位 置 进 行 调用 。 

JavaScript 对 大 小 写 敏感 。 关 键 词 function 必须 是 小 写 的 ， 并 且 必 须 以 与 函数 名 称 相同 
的 大 小 写 来 调用 函数 。 





18.3.2 


调用 带 和 参数 的 函数 


在 调用 函数 时 ， 可 以 向 其 传递 值 ， 这 些 值 被 称 为 参数 。 这 些 参 数 可 以 在 函数 中 使 用 。 
可 以 发 送 任意 数量 的 参数 ， 由 逗号 “, ”分 隔 。 














myFunction (argument1, argument2) 


当 声 明 函 数 时， 请 把 参数 作为 变量 来 声明 。 


function myFunction (var1,var2) 第 


{ 
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fe 
} 


变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 是 第 一 个 被 传递 的 参数 所 给 定 的 
以 此 类 推 。 


<p> 单 击 这 个 按钮 ， 来 调用 带 参数 的 函数 。</p> 
«button onclick-"myFunction('Harry Potter', 'Wizard')"> 单 击 这 里 </button> 
<script> 
function myFunction (name, job) { 
alert ("Welcome " + name + ", the " + job); 
} 
</script> 


在 按钮 被 单 击 时 , 上 面 的 函数 会 提示 "Welcome Harry Potter, the Wizard". 函数 很 灵活 ， 





可 以 使 用 不 同 的 参数 来 调用 该 函数 ， 这 样 就 会 给 出 不 同 的 消息 。 


«button onclick-"myFunction('Harry Potter’, 'Wizard')"> 单 击 这 里 </button> 
<button onclick="myFunction('Bob','Builder')"> 单 击 这 里 </button> 


根据 单 击 按钮 的 不 同 ， 上 面 的 例子 会 提示 "Welcome Harry Potter, the Wizard" 或 


"Welcome Bob, the Builder". 
18.33 ” 带 有 返回 值 的 函数 


有 时 ,我 们 会 希望 函数 将 值 返 回 至 调用 它 的 地 方 , 这 可 以 通过 使 用 return 语句 来 实现 。 


在 使 用 retum 语句 时 ， 函 数 会 停止 执行 ， 并 返回 指定 的 值 。 


function myFunction() 
t 

var x-5; 

return x; 
H 


上 面 的 函数 会 返回 值 5。 
注意 : 整个 JavaScript 并 不 会 停止 执行 ， 仅仅 是 函数 。JavaScript 将 继续 执行 代码 ， 从 





调用 函数 的 地 方 。 函 数 调用 将 被 返回 值 取代 。 


var myVar-myFunction(); 


myVar 变量 的 值 是 5S， 即 函数 "myFunction0" 所 返回 的 值 。 即 使 不 把 它 保存 为 变量 ， 也 








可 以 使 用 返回 值 。 











document .getElementById ("demo") . innerHTML=myFunction () ; 


"demo" 元 素 的 innerHTML 将 成 为 5S， 即 函数 "myFunction(Q" 所 返回 的 值 。 
可 以 使 返回 值 基于 传递 到 函数 中 的 参数 。 


计算 两 个 数字 的 乘积 ， 并 返回 结果 。 


B 





function myFunction (a,b) 


t 
return a*b; 


document.getElementById ("demo") .innerHTML-myFunction (4,3); 


"demo" 76 ZEIT] innerHTML 将 是 12。 
当 希 望 只 退出 函数 时 ， 也 可 使 用 retum 语句 。 返 回 值 是 可 选 的 。 


function myFunction (a,b) 
{ 


if (a>b) 
{ 
return; 
} 
x=atb 


) 
如 果 a>b， 则 上 面 的 代码 将 退出 函数 ， 并 不 会 计算 a 与 b 的 总 和 。 
18.3.4 函数 使 用 样 例 


函数 使 用 样 例 见 代码 18-1. 
代码 18-1 


<html> 
<meta charset="utf-8"> 
<p> 简 单 计 算 器 :</p> 
<table border="1" style="position:center;"> 
<tr> 
<td> 第 一 个 数 : </td> 
<td><input type="text" id="first"/></td> 
</tr> 
<tr> 
<td> 第 二 个 数 : </td> 
<td><input type="text" id="twice"/></td> 
</tr> 
<tr> 
<td colspan="2" > 
&nbsp; 
<button style-"width:inherit" onclick="add()">+</button> 
&nbsp; 
<button style-"width:inherit" onclick="subtract ()"»-«/button» 
&nbsp; 





JavaScript #92 KHER 


HIML5+CSS3+JavaScript P]  z&z E fl7F AE 





Xbutton style-"width:inherit" 
&nbsp; 
<button style-"width:inherit" 
«/td» 
«/tr» 
«tr» 
«td colspan-"2" rowspan-"2"» 
«p id="result"></p> 
«/td» 
</tr> 
</table> 
</html> 
<script> 
var result 1; 
// 加 法 
function add() { 
getFirstNumber (); 
getSecondNumber () ; 
var re =Number (a) +Number (b) ; 
sendResult (re); 


var a = 
var b = 


// 减 法 


function subtract() { 


var a = getFirstNumber (); 
var b = getSecondNumber () ; 
var re =a - b; 


sendResult (re); 


// 乘 法 

function ride() { 
var a = getFirstNumber (); 
var b = getSecondNumber () ; 
var re =a * b; 


sendResult (re); 


// 除 法 


function devide() { 


var a = getFirstNumber (); 
var b = getSecondNumber () ; 
var re =a / b; 


sendResult (re); 


onclick-"ride()"»*«/button» 


onclick-"devide()"»/«/button» 


//f8 p 标签 传 值 

function sendResult (result 1) { 
var num = document.getElementById ("result") 
num.innerHTML = result 1; 

f 


// 获 取 第 一 位 数字 
function getFirstNumber() { 


var firstNumber = document.getElementById ("first") .value; 
return firstNumber; 
) 


// 获 取 第 二 位 数字 
function getSecondNumber() { 


var twiceNumber = document.getElementById ("twice") .value; 
return twiceNumber; 


) 
«/script» 


代码 18-1 中 ,首先 使 用 HTML 建立 基本 的 按钮 和 输入 框 , 再 使 用 JavaScript 获取 HIML 
元 素 的 信息 ， 最 后 通过 调用 函数 返回 加 减 乘除 的 运算 结果 。 
执行 结果 如 图 18-1 所 示 。 


eoe <|> |D 





简单 计算 器 : 





第 一 个 数 : 
第 二 个 数 : | 


























图 18-1 函数 实现 计算 器 


例如 : getFirstNumber 通过 调用 document 类 下 的 getElementById 方法 获取 到 页 面 上 
id="first" 的 元 素 即 第 一 个 输入 框 的 数值 。 
function getFirstNumber() { 


var firstNumber = document .getElementById ("first") .value; 
return firstNumber; 第 
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例如 计算 加 法 时 ， 通 过 getFirstNumber 和 getSecondNumber 获取 到 两 个 相 加 的 元 素 的 
值 ， 再 得 到 和 。 
function add() { 
var a = getFirstNumber(); 
var b = getNumber(); 
var re =Number( a) +Number( b); 
sendResult (re); 
} 


最 后 调用 sendResult 方法 把 界面 id="result" 的 元 素 内 部 的 HTML 更 换 为 新 的 值 。 

















function sendResult(result 1) { 
var num = document.getElementById ("result") 
num.innerHTML = result 1; 

} 


18.4 对 R 


18.4.1 ”对象 创建 方法 


简单 的 对 象 概念 在 第 一 篇 已 经 介绍 过 。 此 处 讨论 的 对 象 是 JavaScript 较为 复杂 的 对 象 ， 
或 者 说 是 传统 面向 对 象 语言 中 的 对 象 。 使 用 JavaScript 创建 对 象 的 方法 有 很 多 ， 列 举 如 下 。 

1. Object 构造 函数 

如 下 面 代 码 创 建 了 一 个 person 对 象 ， 并 用 两 种 方式 打印 出 了 name 的 属性 值 。 


var person = new Object () 
person.name="kevin"; 
person.age=31; 

alert (person.name) ; 

alert (person["name"]) 


2. 对 象 变量 创建 一 个 对 象 
person["5"] 在 这 里 是 合法 的 ， 另 外 使 用 这 种 加 括号 的 方式 ， 字 段 之 间 是 可 以 有 空格 的 
如 person["my age"] 。 


var person = 
{ 
name:"Kevin", 
age:31, 
5:"Test" 
3r 
alert (person.name); 
alert (person["5"]); 


3. 工厂 模式 创建 对 象 
这 种 方式 会 返回 带 有 属性 和 方法 的 person 对 象 。 


function createPerson (name, age, job) 
{ 

var o = new Object (); 

o.name=name; 

o.age=31; 

o.sayName=function () 

{ 

alert (this.name) ; 

u 

return 0; 
} 
createPerson("kevin",31,"se").sayName(); 


4. 自 定义 构造 函数 
这 里 注意 命名 规范 ， 作 为 构造 函数 的 函数 首 字 母 要 大 写 ， 以 区 别 其 他 函数 。 这 种 方式 
的 缺陷 是 sayName 这 个 方法 的 每 个 实例 都 是 指向 不 同 的 函数 实例 ， 而 不 是 同一 个 。 





function Person (name, age, job) 
1 
this.name-name; 
this.age-age; 
this.job-job; 
this.sayName-function() 
t 
alert (this.name) ; 
n 


var person - new Person("kevin",31,"SE"); 
person.sayName(); 


S， 原 型 模式 

解决 了 方法 4 自 定义 构造 函数 中 提 到 的 缺陷 ， 使 不 同 的 对 象 的 函数 〈 如 sayFriends ) 
指向 了 同一 个 函数 。 但 它 本 身 也 有 缺陷 ， 就 是 实例 共享 了 引用 类 型 friends。 从 下 面 的 代码 
执行 结果 可 以 看 到 ， 两 个 实例 的 friends 值 是 一 样 的 ， 这 可 能 不 是 我 们 所 期 望 的 。 

function Person() 

{ 


} 
Person.prototype = { 


第 
constructor : Person, 
"kevin" 18 
name:"kevin", 
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age:31, 
job:"sE", 
friends: ["Jams","Martin"], 
sayFriends:function() 
t 
alert (this.friends) ; 


ir 

var personl - new Person(); 
personl.friends.push ("Joe"); 
personl.sayFriends();//Jams,Martin, Joe 
var person2 - new Person(); 
person2.sayFriends();//James,Martin, Joe 


6. 组 合 使 用 原型 模式 和 构造 函数 


这 种 方法 解决 了 原型 模式 中 存在 的 缺陷 ， 而 且 这 也 是 使 用 最 广泛 、 认 同 度 最 高 的 创建 


对 象 的 方法 。 


function Person (name, age, job) 


{ 

this.name=name; 

this.age=age; 

this.job=job; 

this. friends=["Jams","Martin"]; 
} 
Person.prototype.sayFriends-function() 
t 

alert(this.friends); 
}; 
var personl = new Person("kevin",31,"SE"); 
var person2 = new Person("Tom",30,"SE"); 
personl.friends.push ("Joe"); 
personl.sayFriends();//Jams,Martin, Joe 
person2.sayFriends();//Jams,Martin 


7. 动态 原型 模式 
这 个 模式 的 好 处 在 于 看 起 来 更 像 是 传统 的 面向 对 象 编程 ， 具 有 更 好 的 封装 性 。 
构造 函数 里 完成 了 对 原型 创建 ， 这 也 是 一 个 推荐 的 创建 对 象 的 方法 。 


function Person (name, age, job) 
t 
// 属 性 
this.name=name; 
this.age=age; 
this .job=job; 
this. friends=["Jams", "Martin"]; 





六 











为 在 


// 方 法 


if (typeof this.sayName!-"function") 


{ 
Person.prototype.sayName=function () 


{ 
alert (this.name) ; 


yz 


Person.prototype.sayFriends=function () 
{ 
alert (this.friends) ; 


}; 
} 


var person = new Person ("kevin",31,"SE"); 
person.sayName(); 
person.sayFriends(); 


另外 还 有 两 个 创建 对 象 的 方法 ， 寄 生 构 造 函 数 模式 和 稳妥 构造 函数 模式 。 由 于 这 两 个 
模式 不 是 特别 常用 ， 这 里 就 不 给 出 具体 代码 了 。 

介绍 这 么 多 创建 对 象 的 方法 ， 其 实 真正 推荐 用 的 方法 是 方法 6 和 方法 7。 当 然 在 真正 
开发 过 程 中 要 根据 实际 需要 进行 选择 ， 有 时 也 许 创建 的 对 象 根本 不 需要 方法 ， 也 就 没 必要 
- 定 要 选择 它们 了 。 
18.4.2 ”对 象 创建 示例 


代码 18-2 是 通过 使 用 方法 6 (组合 使 用 原型 模式 和 构造 函数 〉 来 实现 对 象 的 创建 和 
打印 。 
代码 18-2 


<!DOCTYPE html» 

«html» 

«meta charset-"utf-8"» 
«script» 


function Person (name, age) { 
this.name = name; 
this.age = age; 
this.friends = ["Jams","Martin"]; 


this.sayFriends = function() { 
document.write (this.friends) ; 
} 第 
} 18 
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Person.prototype.sayFriends = function (){ 


personl = new Person("Kevin", 20); 
person2 = new Person ("OldKevin", 25); 
personl.friends.push ("Joe"); 
personl.sayFriends () 7 
document.write ("<br>"); 
person2.sayFriends () ; 

</script> 

</html> 


打印 结果 如 图 18-2 所 示 。 





ece | [im] 





Jams,Martin Joe 
Jams,Martin 








图 18-2 JavaScript 对 象 打印 结果 


1843 日 期 对 象 


日 期 对 象 用 于 处 理 日 期 和 时 间 。 

1. 创建 日 期 

Date 对 象 用 于 处 理 日 期 和 时 间 。 可 以 通过 new 关键 词 来 定义 Date 对 象 。 以 下 代码 定 
义 了 名 为 myDate 的 Date 对 象 。 

有 四 种 方式 初始 化 日 期 。 


new Date() // 当前 日 期 和 时 间 
new Date (milliseconds) // 返 回 从 1970 年 1 月 1 日 至 今 的 毫秒 数 
new Date (dateString) 





new Date(year, month, day, hours, minutes, seconds, milliseconds) 


上 面 的 参数 大 多 数 都 是 可 选 的， 在 未 指定 参数 的 情况 下 ， 默 认 参 数 是 0。 实 例 化 一 个 
日 期 的 一 些 例 子 。 


var today = new Date() 


var dl = new Date("October 13, 1975 11:13:00") 
var d2 = new Date(79,5,24) 
var d3 = new Date(79,5,24,11,33,0) 


2. 设置 日 期 
通过 使 用 针对 日 期 对 象 的 方法 ， 可 以 很 容易 地 对 日 期 进行 操作 。 在 下 面 的 例子 中 ， 我 
们 为 日 期 对 象 设 置 了 一 个 特定 的 日 期 (2010 年 1 月 14 日 )。 


Var myDate=new Date(); 
myDate.setFullYear (2010,0,14); 


在 下 面 的 例子 中 ， 将 日 期 对 象 设置 为 5 天 后 的 日 期 。 


Var myDate=new Date(); 
myDate.setDate (myDate.getDate () +5); 


注意 : 如 果 增加 天 数 会 改变 月 份 或 者 年 份 ， 那 么 日 期 对 象 会 自动 完成 这 种 转换 。 


3. 两 个 日 期 比较 
日 期 对 象 也 可 用 于 比较 两 个 日 期 。 下 面 的 代码 将 当前 日 期 与 2100 年 1 月 14 日 比较 : 


var x-new Date () 
x.setFullYear(2100,0,14); 
var today - new Date(); 


if (x>today) 
{ 

alert ("今天 是 2100 年 1 月 14 日 之 前 "); 
} 
else 
{ 

alert ("今天 是 2100 年 1 月 14 日 之 后 "); 
} 


18.4.4 钟表 示例 


代码 18-3 提供 一 个 钟表 实例 。 
代码 18-3 


<!DOCTYPE html» 
<html> 

<head> 

«meta charset-"utf-8"» 


«title»Data Clock Sample</title> 


«script» E 
function startTime() { 18 
* 
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var today-new Date () > 
var h-today.getHours(); 
var m-today.getMinutes(); 
var s-today.getSeconds () ;// 在 小 于 10 的 数字 前 加 一 个 '0" 
m=checkTime (m) ; 
s=checkTime (s); 
document.getElementById('txt').innerHTML-h-":"cm*":"4s; 
t=setTimeout (function() {startTime()},500); 
} 
function checkTime (i) { 
if (i<10){ 
i="0" + i; 
) 
return i; 
} 
</script> 
</head> 
<body onload="startTime () "> 


<div id="txt"></div> 


</body> 
</html> 
<!DOCTYPE html» 
<html> 
<head> 
«meta charset-"utf-8"» 
«title»Data Clock Sample</title> 
«script» 
function startTime() { 
var today=new Date(); 
var h=today.getHours (); 
var m-today.getMinutes(); 
var s-today.getSeconds () ;// 在 小 于 10 的 数字 前 加 一 个 '0' 
m=checkTime (m) ; 
s=checkTime(s) ; 
document .getElementById('txt') .innerHTML=h+":"+mt":"4+s; 
t=setTimeout (function () {startTime() },500); 
} 
function checkTime (i) { 
if (i<10){ 
i="0" + i; 
} 
return i; 


</script> 
</head> 
<body onload="startTime()"> 


<div id="txt"></div> 


</body> 
</html> 


上 面 通过 Date 对 象 获取 到 了 当前 时 间 ， 同 时 调用 Date 对 象 的 getHours, getMinutes, 
getSeconds 方法 获取 到 了 时 间 的 时 分 秒 。 

最 后 使 用 setTimeout 方法 设置 一 个 计时 器 ， 每 隔 500ms 调用 一 次 startTime， 实 现 界面 
的 更 新 。 





t=setTimeout (function () {startTime()},500); 


最 后 结果 如 图 18-3 所 示 。 




















图 18-3 ”钟表 示例 


18.5 事 件 


18.5.1 基本 概念 


JavaScript 可 以 创建 动态 页 面 ， 而 事件 是 可 以 被 JavaScript 侦 测 到 的 行为 。 网 页 中 的 
每 个 元 素 都 能 产生 某 些 可 以 触发 JavaScript 函数 的 事件 。 例 如 ， 在 用 户 单 击 某 按钮 时 产生 
-个 onclick 事件 来 触发 某 个 函数 。 事 件 在 HTML 页 面 中 定义 。 
例如 单 击 页 面 或 图 像 载 入 ， 鼠 标 悬 浮 于 页 面 的 某 个 热点 之 上 ， 在 表单 中 选取 输入 框 ， 
确认 表单 ， 键 盘 按 键 等 ， 这 些 用 户 行为 都 是 事件 。 通 过 控制 这 些 事件 ， 来 决定 用 户 的 行为 
能 够 产生 怎样 的 反馈 效果 。 


18.5.2 事件 分 类 


1. onload 和 onunload 事件 

当 用 户 进入 或 离开 页 面 时 就 会 触发 onload 和 onunload 事件 .onload 事件 常用 来 检测 访 
问 者 的 浏览 器 类 型 和 版 本 ， 然 后 根据 这 些 信息 载 入 特定 版 本 的 网 页 。 

onload 和 onunload 事件 也 常 被 用 来 处 理 用 户 进 入 或 离开 页 面 时 所 建立 的 cookies。 例 
如 , 当 某 用 户 第 一 次 进入 页 面 时 , 可 以 使 用 消息 框 来 询问 用 户 的 姓名 , 姓名 会 保存 在 cookie | 18 
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中 。 当 用 户 再 次 进入 这 个 页 面 时 ， 可 以 使 用 另 一 个 消息 框 来 和 这 个 用 户 打 招呼 : "Welcome 
John Doe!" 。 

2. onfocus, onblur 和 onchange 事件 

onfocus, onblur 和 onchange 事件 通常 相互 配合 用 来 验证 表单 。 

下 面 是 一 个 使 用 onchange 事件 的 例子 。 用 户 一 旦 改变 了 域 的 内 容 ，checkEmail() K 
数 就 会 被 调用 。 











<inputtype="text"size="30"id="email"onchange="checkEmail () "> 


3. onsubmit 事件 

onsubmit 用 于 提交 表单 之 前 验证 所 有 的 表单 域 。 

下 面 是 一 个 使 用 onsubmit 事件 的 例子 。 当 用 户 单 击 表单 中 的 确认 按钮 时 , checkForm() 
函数 就 会 被 调用 。 假 若 域 的 值 无 效 ， 此 次 提交 就 会 被 取消 。checkForm() 函数 的 返回 值 是 
true 或 者 false。 如 果 返 回 值 为 tue， 则 提交 表单 ， 反 之 取消 提交 。 








<formmethod="post"action="xxx.htm"onsubmit="returncheckForm () "> 


4. onmouseover 和 onmouseout 事件 

onmouseover fil onmouseout 事件 用 来 创建 “动态 的 ”按钮 。 

下 面 是 一 个 使 用 onmouseover 事件 的 例子 。 当 onmouseover 事件 被 脚本 侦 测 到 时 ， 就 
会 弹出 一 个 警告 框 。 

<a href=""onmouseover="alert ('AnonMouseOverevent');returnfalse"» 

<imgsrc=""width="100"height="30"> 

</a> 


5. 常见 事件 
JavaScript 常见 事件 如 表 18-2 所 示 。 


表 18-2 JavaScript 常见 事件 


属性 当 以 下 情况 发 生 时 ， 出 现 此 事件 
onabort 图 像 加 载 被 中 断 

onblur 元 素 失去 焦点 

onchange 用 户 改变 域 的 内 容 

onclick 单 击 某 个 对 象 

ondblclick 双击 某 个 对 象 

onerror 当 加 载 文档 或 图 像 时 发 生 某 个 错误 
onfocus 元 素 获 得 焦点 

onkeydown 某 个 键盘 的 键 被 按 下 

onkeypress 某 个 键盘 的 键 被 按 下 或 按 住 
onkeyup 某 个 键盘 的 键 被 松 开 

onload 某 个 页 面 或 图 像 被 完成 加 载 
onmousedown 某 个 鼠标 按键 被 按 下 
onmousemove 鼠标 被 移动 


onmouseout 鼠标 从 某 元 素 移 开 





BR 





属性 当 以 下 情况 发 生 时 ， 出 现 此 事件 
onmouseover 鼠标 被 移 到 某 元 素 之 上 
onmouseup 某 个 鼠标 按键 被 松 开 

onreset 重 置 按钮 被 单 击 

onresize 窗口 或 框架 被 调整 尺寸 

onselect 文本 被 选 定 

onsubmit 提交 按钮 被 单 击 

onunload 用 户 退 出 页 面 


18.5.3 ”事件 示例 


代码 18-4 通过 将 button 的 onclick 事件 绑 定 显示 时 间 的 函数 , 来 实现 时 间 的 显示 功能 。 
代码 18-4 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 

<title> 菜 鸟 教程 (runoob . com) «/title» 
</head> 

<body> 


<p> 单 击 按钮 执行 <em>displayDate()</em> 函数 .</p> 
«button onclick="displayDate () "> 点 这 里 </button> 
<script> 
function displayDate() { 
document .getElementById ("demo") . innerHTML=Date () ; 
} 
</script> 
<p id="demo"></p> 


</body> 
</html> 


时 间 显 示 功 能 效果 如 图 18-4 所 示 。 




















点 击 按钮 执行 displayDate() 函数 


点 这 里 


Sun Jul 23 2017 21:37:11 GMT+0800 (CST) 
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l. 下 面 哪 项 JavaScript 变量 定义 是 非法 的 ? C 
A. varx=2; 
B. var pi= 3.1415; 
C. var str = “Hello” 
D. varz-z-*] 
- JavaScript 局 部 变量 和 全 局 变量 的 区 别 是 什么 ? 
- JavaScript 如 何 调 用 带 参 的 函数 ? 
- JavaScript 有 哪 几 种 对 象 创建 方法 ? 
.什么 是 JavaScript 事件 ? 
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19.1 数 组 


在 程序 语言 中 数组 的 重要 性 不 言 而 喻 。 在 JavaScript 中 ， 数 组 也 是 最 常 使 用 的 对 象 之 
-， 数 组 是 值 的 有 序 集合 ， 由 于 弱 类 型 的 原因 ，JavaScript 中 数组 十 分 灵活 、 强 大 ， 不 像 
Java 等 强 类 型 高 级 语言 数组 只 能 存放 同一 类 型 或 其 子 类 型 元 素 。JavaScript 在 同一 个 数组 
中 可 以 存放 多 种 类 型 的 元 素 ， 而 且 其 长 度 也 是 可 以 动态 调整 的 ， 可 以 随 着 数据 的 增加 或 减 
少 自动 地 对 数组 长 度 做 出 更 改 。 

19.1.1 创建 数组 


1. 构造 函数 
无 参 构造 函数 ， 创 建 一 空 数 组 。 


var al=new Array(); 





zs -个 数字 参数 构造 函数 ， 指 定数 组 长 度 〈 由 于 数组 长 度 可 以 动态 调整 ， 作 用 并 
SAO. 

创建 指定 长 度 的 数组 。 

var a2=new Array(5); 

带 有 初始 化 数据 的 构造 函数 ， 创 建 数组 并 初始 化 参数 数据 。 

var a3-new Array(4,'hello',new Date()); 

2. 字面 量 

使 用 中 括号 ， 创 建 空 数组 ， 等 同 于 调用 无 参 构 造 函 数 。 

Var a4=[]; 

使 用 中 括号 ， 并 传 入 初始 化 数据 ， 等 同 于 调用 带 有 初始 化 数据 的 构造 函数 。 

var a5-[10]; 

3. 注意 点 

在 使 用 构造 函数 创建 数组 时 如 果 传 入 一 个 数字 参数 ， 则 会 创建 一 个 长 度 为 参数 的 数 
组 ， 如 果 传 入 多 个 ， 则 创建 一 个 数组 ， 参 数 将 作为 初始 化 数据 加 到 数组 中 。 


var al=new Array(5); 
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console.log(al.length); H15 
console.log (al); //0), ŽAR 


var a2=new Array (5,6); 


console.log (a2.length); //2 


但 是 使 用 字面 量 方式 ， 无 论 传 入 几 个 参数 ， 都 会 把 参数 当 作 初始 化 内 容 。 














var al=[5]; 
console.log(al.length); yrr 
console.log (al); 74651 


var a2=[5,6]; 
console.log (a2.length) ; 1/2 
console. log (a2); //15,6] 


使 用 带 初始 化 参数 的 方式 创建 数组 时 ， 最 好 在 末尾 不 要 带 多 余 的 “,”。 在 不 同 的 浏览 
器 下 ， 对 此 的 处 理 方式 是 不 一 样 的 。 


var al-[1,2,3,]; 
console.log(al.length); 





console.log (al); 


这 段 脚 本 在 现代 浏览 器 上 的 运行 结果 和 当初 设想 的 一 样 ， 长 度 都 是 3， 但 是 在 低 版 本 
正 浏览 器 下 确实 长 度 为 4 的 数组 ， 最 后 一 条 数据 是 undefined. 


19.1.2 数组 的 索引 与 长 度 


数组 的 值 可 以 通过 自然 数 索 引 访问 来 进行 读 写 操作 ， 下 标 也 可 以 是 一 个 得 出 非 负 整 数 


var al=[1,2,3,4]; 


console.log(al[0]); //1 
var i-1; 

console.log (al[i]); //2 
console.log (al[++i]); 413 


数组 也 是 对 象 ， 可 以 使 用 索引 的 奥秘 在 于 ， 数 组 会 把 索引 值 转换 为 对 应 字符 串 〈1 会 
被 视 为 “1”) 作为 对 象 属性 名 。 

console.log(1 in al); //true， 确 实 是 一 个 属性 

索引 特殊 性 在 于 数组 会 自动 更 新 length 属性 ， 当 然 因 为 JavaScript 语法 规定 数字 不 能 
作为 变量 名 ， 所 以 不 能 使 用 array.1 这 样 的 格式 来 访问 数组 。 由 此 可 见 ， 其 实 负数 甚至 非 数 
字 “ 索 引 ” 都 是 允许 的 ， 只 不 过 这 些 会 变 成 数组 的 属性 ， 而 不 是 索引 。 数 组 索引 示例 (—) 
如 图 19-1 所 示 。 





Var a=new Array(1,2,3); 


a[-10]-"a[-10]"; 


a["sss"]-"sss"; 
这 样 可 以 看 出 所 有 的 索引 都 是 属性 名 ， 但 只 有 自然 数 ARMA) 才 是 索引 。 因 此 ， 


一 般 在 使 用 数组 时 ， 不 会 出 现 数组 越界 错误 。 数 组 的 索引 可 以 是 不 连续 的 ， 访 问 index 不 
存在 的 元 素 时 返回 undefined。 数 组 索引 示例 如 图 19-2 所 示 。 

















Var a=new Array(1,2,3); 
a[100]=100; 


console.log(a.length); //101 
console.log(a[3]); //undefined 
console.log(a[99]); //undefined 


console.log(a[100]); 100 


Va: Array[3] Y al Array[101] 
0: 1 0: 1 






100: 100 
length: 101 
> proto : Array[0] 





图 19-1 数组 索引 示例 (一) 图 19-2 数组 索引 示例 


在 上 面 的 例子 中 ， 虽 然 直 接 对 a[100] 赋 值 不 会 影响 a[4] 或 af[99]， 但 数组 的 长 度 却 会 受 
到 影响 。 数 组 length 属性 等 于 数组 中 最 大 的 index+1。 知 道 数 组 的 length 属性 同样 是 个 可 
写 的 属性 ， 当 把 数组 的 length 属性 值 强制 地 设置 为 小 于 或 等 于 最 大 index 值 时 ， 数 组 会 自 
动 删除 index 大 于 或 等 于 length 的 数据 ， 在 刚才 代码 中 追加 几 句 。 
a.length=2 
console.log(a);  //[1,2] 


这 时 会 发 现 a[2] 和 a[100] 被 自动 删除 了 ， 同 理 ， 如 果 把 length 设置 为 大 于 最 大 index+1 
的 值 时 ， 数 组 也 会 自动 扩张 ， 但 是 不 会 为 数组 添加 新 元 素 ， 只 是 在 尾部 追加 空间 。 


a.length=5; 
console.log(a);  //[1,2] // 后 面 没 有 3 个 undefined 


19.1.3 元 素 添 加 /删除 


1. 基本 方法 

上 面 例子 已 经 用 了 向 数组 内 添加 元 素 的 方法 ， 直 接 使 用 索引 就 可 以 (index 没 必要 连续 )。 
var a=new Array(1,2,3); 

a[3]=4; 

console.log(a); //(1, 2, 3, 4] 


前 面 提 到 数组 也 是 对 象 ， 索 引 只 是 特殊 的 属性 ， 所 以 可 以 通过 删除 对 象 属性 的 方法 ， 
即使 用 delete 删除 数组 元 素 。 
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delete a[2]; 
console.log (a[2]); //undefined 


这 样 和 直接 把 a[2] 赋 值 为 undefined 类 似 , 不 会 改变 数组 长 度 , 也 不 会 改变 其 他 数据 的 
index 和 value 对 应 关系 。 数 组 增删 如 图 19-3 所 示 。 

2. 栈 方 法 

不 难 发 现 , 在 上 面 例 子 中 ,其 删除 方法 ， 并 不 是 希望 的 表现 形 
式 。 很 多 时 候 ， 希 望 在 删除 中 间 一 个 元 素 后 ， 后 面 元 素 的 index Wü ^ “proto: Arraylo! 
会 自动 减 一 , 同时 数组 length 减 一 , 就 好 像 在 一 个 堆栈 中 拿 去 其 中 
的 一 个 。 数 组 已 经 帮 我 们 做 好 了 这 种 操作 方式 ，pop 和 push 能 够 。 ”图 19-3 数组 增删 
让 我 们 像 堆栈 那样 ， 先 入 后 出 地 使 用 数组 。 


var a=new Array(1,2,3); 





a.push(4); 

console.log (a); AAU 2, 3, 41 
console.log(a.length); //4 
console.log(a.pop(a)); 114 
console.log (a); Zril; 2, 3) 
console.log (a.length) ; //3 


3. 队列 方法 

既然 栈 方法 都 实现 了 ， 先 入 先 出 的 队列 怎么 能 少 ? shift 方法 可 以 删除 数组 index 最 小 
元 素 ， 并 使 后 面 元 素 index 都 减 一 ，length 也 减 一 。 这 样 使 用 shift/push 就 可 以 模拟 队列 了 ， 
当然 与 shift 方法 对 应 的 有 一 个 unshift 方法 ， 它 用 于 向 数组 头 部 添加 一 个 元 素 。 

var a=new Array(1,2,3); 

a.unshift (4); 


console.log (a); //(4, 1, 2, 3] 
console.log(a.length) ; 7/4 
console.log(a.shift(a)); 11/4 
console.log(a); //[1, 2, 3) 
console.log(a.length); //3 

4. 最 佳 方案 


JavaScript 提供 了 一 个 splice 方法 用 于 一 次 性 地 解决 数组 添加 、 删 除 (这 两 种 方法 一 结 
合 就 可 以 达到 替换 效果 )。splice 方法 有 三 个 参数 : 

。 开始 索引 ; 

。 删除 元 素 的 位 移 ; 

。 插入 的 新 元 素 ， 当 然 也 可 以 写 多 个 。 

splice 方法 可 以 返回 一 个 由 删除 元 素 组 成 的 新 数组 。 如 果 没 有 删除 ， 则 返回 空 数 组 。 





var a=new Array(1,2,3,4,5); 


通过 指定 前 两 个 参数 ， 可 以 使 用 splice 删除 数组 元 素 ， 同 样 会 带 来 索引 调整 及 length 


var a=new Array(1,2,3,4,5); 


console.log(a.splice(1,3)); IEZ 3: AY 
console.log(a.length) ; 1/2 
console.log(a); //[1,5] 


如 果 数 组 索引 不 是 从 0 开始 的 ， 那 么 结果 将 会 很 有 意思 ， 有 一 这 样 的 数组 ， 非 0 开始 
数组 如 图 19-4 所 示 。 


var a=new Array(); 

a[2]=2; 

a[3]=3; 

a[7]=4; 

a[8]=5; 

console.log(a.splice(3,4)); //[3] 
console.log(a.length) ; 7/5 

console.log (a); (1122 29 32» 4, 4 Dt 


slice 操作 后 的 结果 如 图 19-5 tas, splice 的 第 一 个 参数 是 绝对 索引 值 ， 而 不 是 相对 于 
数组 索引 ， 第 二 个 参数 并 不 是 删除 元 素 的 个 数 ， 而 是 删除 动作 执行 的 次 数 ， 它 并 不 是 按 数 
组 实际 索引 移动 ， 而 是 连续 移动 。 同 时 调整 后 面 元 素 索引 ， 前 面 索引 不 理会 。 


Va: Array[9] 
2:2 





图 19-4 4E 0 开始 数组 图 19-5 slice 操作 后 的 结果 


要 实现 插入 与 替换 ， 只 要 将 方法 中 的 第 二 个 参数 ， 即 删除 动作 执行 的 次 数 设 为 0， 第 
三 个 参数 及 以 后 填写 要 插入 内 容 ， 再 调用 splice 方法 就 能 执行 插入 操作 。 反 之 ， 如 果 第 二 
个 参数 不 为 0， 则 变 成 了 先 在 该 位 置 删除 再 插入 ， 也 就 是 替换 效果 。 


a.splice(1,0,9,99,999); 


console.log(a.length); //8 

console.log(a); /Jfii,; 95 99, 999, 2, 3, 4, 51 
a.splice(1,3,8,88,888); 

console.log(a.length) ; //8 

console.log (a); ATL; (By. 68, 888, 2, 3, 4, 51] 


1914 常用 方法 


1. join(char) 
这 个 方法 在 C# 等 语言 中 也 有 ， 其 作用 是 把 数组 元 素 对 象 调用 其 toString() 方 法 )， 通 
过 使 用 参数 作为 连接 符 ， 连 接 成 一 字符 串 。 


var a-new Array(1,2,3,4,5); 


HIML5+CSS3+JavaScript P] HA IRUFE 





console.log (a.join(',')); /71,2,3,4,5 
console.log(a.join(' ')); //12 34 5 


2. slice(start,end) 

不 要 和 splice 方法 混淆 ，slice 方法 是 用 于 返回 数组 中 一 个 片段 或 子 数组 。 如 果 只 写 
个 参数 ， 则 返回 参数 到 数组 结束 部 分 ， 如 果 参 数 出 现 负数 ， 则 从 数组 尾部 计数 (-3 的 意思 
是 数组 倒数 第 三 个 ， 一 般 人 不 会 这 么 做 ， 但 是 在 不 知道 数组 长 度 的 情况 下 ， 在 想 舍弃 后 n 
个 的 时 候 是 有 些 用 的 ， 不 过 数组 长 度 很 好 知道 ， 这 是 一 个 很 纠结 的 用 法 ); 如 果 start 大 于 
end 返回 空 数 组 ， 值 得 注意 的 一 点 是 slice 不 会 改变 原 数组 ， 而 是 返回 一 个 新 的 数组 。 








var a=new Array(1,2,3,4,5); 


console.log(a); RE 25 34:4, 5] 
console.log(a.slice(1,2)); Pa 
console.log(a.slice(1,-1)); //I2, 3, 4] 
console.log(a.slice(3,2)); 7/0) 
console.log(a); FEL 25 3, 4, 51 


3. concat(array) 
concat 方法 是 用 于 拼接 数组 ，a.concat(b) 返 回 一 个 a 和 b 共同 组 成 的 新 数组 ， 同 样 不 会 
修改 任何 一 个 原始 数组 ， 也 不 会 递归 连接 数组 内 部 的 数组 。 


var a-new Array(1,2,3,4,5); 
var b-new Array(6,7,8,9); 


console.log (a.concat (b)); // [1, 2, 3, 4, 5, 6, 7, 8, 9] 
console.log(a); //[1, 2, 3, 4, 5] 
console.log(b); //(6, 7, 8, 9] 


4. reverse() 


Teverse() 方 法 是 用 于 将 数组 逆序 ， 与 之 前 不 同 的 是 它 会 修改 原 数组 。 


var a-new Array(1,2,3,4,5); 
a.reverse(); 
console.log(a); //[5, 4, 3, 2, 1] 


同样 ， 当 数组 索引 不 是 连续 或 以 0 开始 ， 这 时 需要 注意 结果 。reverse 前 的 数组 内 容 如 
图 19-6 所 示 。 


var a=new Array(); 
a[2]22; 
a[3]23; 
a[7]=4; 
a[8]=5; 


a.reverse(); 


reverse 后 的 数组 内 容 如 图 19-7 所 示 。 


Va: Array[9] 





图 19-6 reverse 前 的 数组 内 容 图 19-7 reverse 后 的 数组 内 容 


5. sort 

sort 方法 用 于 对 数组 进行 排序 ， 当 没有 参数 时 ， 会 按 字 母 表 升序 排序 。 如 果 含 有 
undefined， 则 会 被 排 到 最 后 面 ， 而 对 象 元 素 会 调用 其 toString 方法 ; 如 果 想 按照 自己 定义 
的 方式 排序 ， 则 可 以 传 一 个 排序 方法 进去 ， 这 是 一 个 很 典型 的 策略 模式 ， 同 样 sort 会 改变 


Var a=new Array(5,4,3,2,1); 
a.sort(); 
console.log (a); XITE 2; 3; 4, 5] 


但 是 因为 按照 字母 表 排序 ，7 就 比 10 大 了 。 


var a=new Array(7,8,9,10,11); 
a.sort(); 
console.log (a); J/[10, 11, 7, 8, 9] 


这 时 候 我 们 需要 传 入 自 定义 排序 函数 。 


var a=new Array(7,8,9,10,11); 
a.sort (function (vl, v2) { 
return vl-v2; 
}); 
console.log (a); ILI. 8,:5, 10, BL) 


JavaScript 的 数组 既 强 大 又 灵活 , 但 是 在 遍历 元 素 和 获取 元 素 位 置 等 情况 下 也 有 一 定 的 
不 便 。 这 些 在 ECMAScript 中 已 经 得 到 解决 ， 熟 练 地 使 用 ECMAScript 可 以 让 JavaScript 变 
得 更 加 优雅 而 高 效 。 


19.2 Date 


19.2.1 Date *t € fá 4 


Date (日 期 ) 对 象 是 JavaScript 中 经 常 使 用 的 对 象 。 通 过 Date 对 象 可 以 方便 地 建立 时 
间 上 的 复杂 逻辑 关系 ， 同 时 也 可 以 用 它 来 处 理 一 些 简 单 的 、 与 事件 相关 的 任务 。 

例如 下 面 提供 四 个 简单 的 实例 。 

(1) 将 一 个 字符 串 转 换 为 Date 对 象 的 写法 。 


var str = "2012-12-12"; 
var date = new Date(str); // 字 符 串 转换 为 Date 对 象 


document.write (date.getFullYear()); 


(2) Date.getDate() 
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// 输 出 年 份 





返回 是 日 期 对 象 中 某 月 的 日 期 ( 儿 号 )。 


var date = new Date(); 


document.write (date.getDate()); 


(3) Date.getDay() 


返回 日 期 对 象 中 的 星期 几 。 


var date = new Date(); 


document.write (date.getDay()); 


(4) Date.getFulYear() 


返回 年 份 。 


var date = new Date(); 
document .write (date.getFullYear()); 


19.2.2 Date 对 象 沉 见方 法 
Date 对 象 常见 方法 如 表 19-1 所 示 。 


方法 

Date() 

getDate() 
getDay() 
getMonth() 
getFullYear() 
getYear() 
getHours() 
getMinutes() 
getSeconds() 
getMilliseconds() 
getTime() 
getTimezoneOffset() 
getUTCDate() 
getUTCDay() 
getUTCMonth() 
getUTCFullYear() 
getUTCHours() 
getUTCMinutes() 
getUTCSeconds() 
getUTCMilliseconds() 
parse() 

setDate() 
setMonth() 
setFullYear() 
setYear() 


表 19-1 Date 对 象 常见 方法 
描述 
返回 当日 的 日 期 和 时 间 
从 Date 对 象 返回 一 个 月 中 的 某 一 天 〈1 一 31) 
从 Date 对 象 返回 一 周 中 的 某 一 天 〈0 一 6) 
从 Date 对 象 返回 月 份 (0 一 11) 
从 Date 对 象 以 四 位 数字 返回 年 份 
请 使 用 getFullYear0 方 法 代替 
返回 Date 对 象 的 小 时 (0 一 23) 
返回 Date 对 象 的 分 钟 (0 一 59) 
返回 Date 对 象 的 秒 数 (0 一 59) 
返回 Date 对 象 的 毫秒 (O~999) 
返回 1970 年 1 月 1 日 至 今 的 毫秒 数 
返回 本 地 时 间 与 格林 尼 治标 准时 间 (GMT)》 的 分 钟 差 
根据 世界 时 从 Date 对 象 返回 月 中 的 一 天 (1 一 31) 
根据 世界 时 从 Date 对 象 返回 周 中 的 一 天 〈0 一 6) 
根据 世界 时 从 Date 对 象 返回 月 份 (0 一 11) 
根据 世界 时 从 Date 对 象 返 回 四 位 数 的 年 份 
根据 世界 时 返回 Date 对 象 的 小 时 〈0 一 23) 
根据 世界 时 返回 Date 对 象 的 分 钟 〈0 一 59) 
根据 世界 时 返回 Date 对 象 的 秒 钟 “0 一 59) 
根据 世界 时 返回 Date 对 象 的 毫秒 (0—999) 
返回 1970 年 1 月 1 日 午夜 到 指定 日 期 (字符 串 ) 的 毫秒 数 
设置 Date 对 象 中 月 的 某 一 天 (1—3D 
设置 Date 对 象 中 月 份 (0 一 11) 
设置 Date 对 象 中 的 年 份 〈 四 位 数字 ) 
请 使 用 setFullYear0 方 法 代替 




















BR 





方法 描述 

setHours() 设置 Date 对 象 中 的 小 时 〈0 一 23) 

setMinutes() WE Date 对 象 中 的 分 钟 0 一 59) 

setSeconds() 设置 Date 对 象 中 的 秒 钟 (O~S9) 

setMilliseconds() 设置 Date 对 象 中 的 毫秒 (0—999) 

setTime() 以 毫秒 设置 Date 对 象 

setUTCDate() 根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 〈1 一 31) 
setUTCMonth() 根据 世界 时 设置 Date 对 象 中 的 月 份 (0 一 11) 
setUTCFullYear() 根据 世界 时 设置 Date 对 象 中 的 年 份 〈 四 位 数字 ) 
setUTCHours() 根据 世界 时 设置 Date 对 象 中 的 小 时 〈0 一 23) 
setUTCMinutes() 根据 世界 时 设置 Date 对 象 中 的 分 钟 (O~S9) 
setUTCSeconds() 根据 世界 时 设置 Date 对 象 中 的 秒 钟 〈0 一 59) 
setUTCMilliseconds() 根据 世界 时 设置 Date 对 象 中 的 毫秒 (0—999) 
toSource() 返回 该 对 象 的 源 代码 

toString() 把 Date 对 象 转换 为 字符 串 

toTimeString() 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 

toDateString() 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 

toGMTString() 请 使 用 toUTCString(0 方 法 代替 

toUTCString() 根据 世界 时 ， 把 Date 对 象 转 换 为 字符 串 
toLocaleString() 根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 
toLocaleTimeString() 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleDateString() 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
UTCO 根据 世界 时 返回 1970 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
valueOf() 返回 Date 对 象 的 原始 值 
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JavaScript 的 表单 功能 主要 是 通过 HTMLFormElement 9 (4 Fi. HTMLFormElement 继 
承 了 HIMLElement， 有 其 独 有 的 属性 和 方法 。 
e acceptCharset: 服务 器 能 够 处 理 的 字符 集 ， 等 价 于 HTML 的 accept-charset 特性 。 
e action: 接收 请 求 的 URL， 等 价 于 HTML 中 的 action 特性 。 
elements: 表单 中 所 有 控件 的 集合 ‘HTMLCollection)。 
。 enctype: 请 求 的 编码 类 型 。 
* length: 表单 中 控件 的 数量 。 
。 method: 要 发 送 的 HTTP 请 求 类 型 ， 通 常 是 get 或 post。 
。 name: 表单 的 名 称 。 
reset(): 将 所 有 表单 域 重 置 为 默认 值 。 
。 submit(): 提交 表单 。 
o target: 用 于 发 送 请 求 和 接收 响应 的 窗口 名 称 。 
取得 form 元 素 的 引用 可 以 是 getElementById, 也 可 以 是 document.forms 中 数值 索引 或 
name 值 。 
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19.3.1 提交 表单 
提交 表单 的 按钮 有 三 种 。 


<input type="submit" value="Submit Form"> 

<button type-"submint"»Submit Form</button> 

<input type="image" src=""> 

以 上 面 的 这 种 方法 提交 表单 时 ， 会 在 浏览 器 请 求 发 送 给 服务 器 之 前 触发 submit 事件 ， 
这 样 就 可 以 验证 表单 数据 以 及 决定 是 否 允许 提交 表单 ， 如 下 面 的 代码 就 可 以 阻止 表单 的 
提交 。 

var form = document.getElementById ("myForm"); 

form.addEventListener("submit", function() ( 


event.preventDefault(); 
ps 


另外 也 可 以 通过 JavaScript 脚本 调用 submit() 方 法 提交 表单 ， 在 调用 submit) Pere 4 e 
时 ， 不 会 触发 submit 事件 。 


var form = document.getElementById ("myForm"); 





form.submit(); 
在 第 一 次 提交 表单 后 ， 如 果 长 时 间 没 有 回应 ， 用 户 则 会 变 得 不 耐烦 ， 往 往 会 多 次 单 击 
是 交 按 钮 ， 从 而 造成 重复 提交 表单 的 情况 。 因 此 应 该 在 第 一 次 提交 表单 后 ， 就 禁用 提交 按 
钮 或 利用 onsubmit 事件 阻止 后 续 操作 。 
var submitBtn = document.getElementById ("submitBtn"); 
submitBtn.onclick = function() { 
// 处 理 表格 和 提交 等 
submitBtn.disabled = true; 
}; 


19.3.2 Z£HRE 
de VIA AE HY input £X button. 


bah 





<input type="reset" value="Reset Form"> 
<button type="reset">Reset Form</button> 


当 用 户 单 击 重 置 按钮 来 重 置 表单 时 ， 会 触发 reset 事件 ， 可 以 在 必要 的 时 候 取消 重 置 
操作 。 

Var resetBtn = document.getElementById ("resetBtn") ; 

resetBtn.addEventListener("reset", function() { 


event .preventDefault (); 
}); 


ps 


另外 也 可 以 通过 JavaScript 脚本 调用 reset(O 方 法 重 置 表单 , 在 调用 reset 77 13:38 A 
时 会 触发 reset 事件 。 





var form = document.getElementById ("myForm"); 
form.reset (); 


19.3.3 表单 字段 
每 个 表单 都 有 一 个 elements 属性 ， 该 属性 是 表单 中 所 有 表单 〈 字 段 ) 的 集合 。 


var form = document.forms ["myForm"]; 

var list = []; 

// 取 得 表单 中 第 一 个 字段 

var firstName = form.elements[0]; 
list.push (firstName.name) ; 

// 取 得 表单 中 名 为 lastName 的 字段 

var lastName = form.elements["lastName"]; 
list.push (lastName.name) ; 

// 取 得 表单 中 包含 的 字段 的 数量 

var fieldCount = form.elements.length; 
list.push (fieldCount) ; 
console.log(list.toString()); //firstName, lastName, 4 


多 个 表单 控件 使 用 一 个 name〈 单 选 按钮 )， 那 么 会 返回 以 该 name 命名 的 NodeList. 


<form id="myForm" name="myForm"> 
<ul> 
<li><input type="radio" name-"color" value-"red"»red«/li» 
«li»«input type="radio" name-"color" value="yellow">yellow</1li> 
blue">blue</1i> 





«li»«input type="radio" name="color" value= 
</ul> 
<button type="submint">Submit Form</button> 
<button type="reset">Reset Form</button> 
</form> 


name 都 是 color， 在 访问 elements["color"] 时 ， 返 回 NodeList. 


var list = []; 
var form = document. forms ["myForm"]; 
var radios = form.elements["color"]; 


console.log(radios.length) //3 


1. 共有 的 表单 字段 属性 
disabled: 布尔 值 ， 表 示 当 前 字段 是 否 被 禁用 。 
form: 指向 当前 字段 所 属 表 单 的 指针 ， 只 读 。 


e name: 当前 字段 的 名 称 。 第 
e readOnly: 布尔 值 ， 表 示 当 前 字段 是 否 只 读 。 19 
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e tabIndex: 表示 当前 字段 的 切换 Cab) 序号 。 

。 type: 当前 字段 的 类 型 。 

。 value: 当前 字段 被 提交 给 服务 器 的 值 。 对 文件 字段 来 说 ， 这 个 属性 是 只 读 的 ， 包 含 
着 文件 在 计算 机 中 的 路 径 。 

€ 在 提交 表单 后 ， 可 通过 submit 事件 禁用 提交 按钮 ， 但 不 可 以 用 onclick 事件 ， 因 为 
onclick 在 不 同 浏览 器 中 有 “时 差 ”。 

.共有 表单 字段 方法 

e focus): 激活 字段 ， 使 其 可 以 响应 键盘 事件 。 

。 bur): 失去 焦点 ， 触 发 (使 用 的 场合 不 多 )。 

可 以 在 侦 听 页 面 的 load 事件 上 添加 该 focus0 方 法 。 


N 


window.addEventListener ("load", function() { 
document . forms ["myForm"] .elements ["lastName"] . focus (); 
}); 


注意 ， 第 一 个 表单 字段 是 mput， 如 果 其 type 特性 为 "hidden"， 或 者 css 属性 的 display 
和 visibility 属性 隐藏 了 该 字段 ， 则 会 导致 错误 。 

在 HTMLS 中 ， 表 单 中 新 增加 了 autofocus 属性 ， 可 以 自动 地 把 焦点 移动 到 相应 字段 。 

3. autofocus 属性 


<input type="text" name="lastName" autofocus> 
或 者 检测 是 否 设置 了 该 属性 ， 没 有 的 话 再 调用 focus() 方 法 。 


window.addEventListener("load", function() { 
var form - document.forms["myForm"]; 
if (form["lastName"].autofocus !-- true) ( 
form["lastName"].focus(); 
}; 
he 


4. 共有 的 表单 字段 事件 

除了 支持 鼠标 键盘 更 改 和 HIML 事件 之 外 ， 所 有 的 表单 字段 都 支持 下 列 三 个 事件 。 

(1) blur: 当前 字段 失去 焦点 时 触发 。 

(2) change: input 元 素 和 textarea 元 素 , 在 它们 失去 焦点 且 value 值 改变 时 触发 ; select 
元 素 在 其 选项 改变 时 触发 (不 失去 焦点 也 会 触发 )。 

(3) focus: 当前 字段 获得 焦点 时 触发 。 

例如 : 


var form = document. forms ["myForm"]; 


var firstName = form.elements["firstName"]; 


firstName.addEventListener ("focus", handler); 
firstName.addEventListener("blur", handler); 


firstName.addEventListener("change", handler); 


function handler() ( 
switch (event.type) ( 
case: "focus": 


if (firstName.style.backgroundColor !== "red") { 
firstName.style.backgroundColor - "yellow"; 

F 

break; 


case "blur": 
if (event.target.value.length < 1) { 
firstName.style.backgroundColor = "red"; 
} else { 
firstName.style.backgroundColor = ""; 
Me 
break; 
case "change": 
if (event.target.value.length < 1) { 
firstName.style.backgroundColor = "red"; 
} else { 





firstName.style.backgroundColor = 
n 
break; 


} 
19.3.4 表单 样 例 


JavaScript 常用 于 对 输入 数字 的 验证 ， 接 下 来 代码 19-1 将 展示 一 个 输入 数字 验证 的 
JavaScript] 样 例 代码 。 

代码 19-1 

<!DOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8"» 


</head> 
<body> 


<hl>JavaScript 验证 输入 </hl> 
<p> 请 输入 1 一 10 之 间 的 数字 : </p> 
<input id="numb"> 


<button type="button" onclick="myFunction() "> 提交 </button> 
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<p id="demo"></p> 


<script> 
function myFunction() { 
var x, text; 


// 获 取 id-"numb" 的 值 
x = document.getElementById ("numb") .value; 


// 如 果 输 入 的 值 x 不 是 数字 或 者 小 于 1 或 者 大 于 10， 则 提示 错误 Not a Number or 


//less than one or greater than 10 


if (isNaN(x) || x < 1 || x > 10) { 
text = "输入 错误 "7 
} else { 


text = "AEM"; 
} 
document .getElementById ("demo") . innerHTML = text; 
} 
</script> 


</body> 
</html> 


如 果 输 入 的 数字 在 1 一 10 之 间 ， 则 会 提示 正确 ; 否则 提示 错误 。JavaScript 验证 输入 正 
确 和 错误 界面 如 图 19-8 和 图 19-9 所 示 。 

















ece m e^o oO 
JavaScript 验证 输入 JavaScript 验证 输入 
请 输入 1 到 10 之 间 的 数字 : 请 输入 1 到 10 之 间 的 数字 : 
1 提交 
99 提交 
输入 正确 
输入 错误 
图 19-8 JavaScript 验证 输入 正确 界面 图 19-9 JavaScript 验证 输入 错误 界面 


19.4 类 库 


许多 常见 的 功能 都 被 封装 到 了 JavaScript 类 库 中 ， 程 序 员 不 需要 重复 实现 一 些 他 人 已 
经 完成 的 任务 。 这 时 ， 学 会 JavaScript 类 库 的 使 用 就 是 十 分 重要 的 。 当 引用 JavaScript 类 库 
时 ， 通 常 将 引用 语句 放置 在 HTML 文件 的 最 后 。 因 为 JavaScript 的 加 载 会 影响 网 页 页 面 的 





<html> 
<body> 


<script str="www.example.com"> </script> 
</body> 
</html> 


19.41 常见 类 库 


1. jQuery 

JavaScript 类 库 中 最 有 名 的 莫 属 Google 公司 的 jQuery 框架 。 jQuery 是 一 个 高 效 、 精 简 
并 且 功 能 丰富 的 JavaScript 工具 库 。 它 提供 的 API 易于 使 用 ， 并 且 可 以 兼容 众多 的 浏览 器 ， 
这 让 诸如 HTML 文档 遍历 和 操作 、 事 件 处 理 、 动 画 和 Ajax 操作 变 得 更 加 简单 。 

2. Cut.js 

Cutjs 是 一 个 能 够 开发 的 高 性 能 、 动 态 互 动 2D HTMLS 图 形 的 超 迷 类 库 如 图 19-10 所 
示 。 它 可 以 支持 现代 的 浏览 器 和 移动 设备 ， 还 可 以 开发 游戏 和 可 视 化 的 应 用 。CutJS 提供 
了 DOM 类 型 的 API 来 创建 和 播放 基于 画布 的 图 形 。 


CULJS coute comas. 





图 19-10 Cutjs 


3. Sticker.js 
Stickers 是 一 个 轻 量 级 的 JavaScript 类 库 ， 它 允许 你 创建 粘贴 的 效果 ， 如 图 19-11 所 
示 。 它 不 依赖 任何 类 库 ,基于 MIT License 创建 ,支持 所 有 支持 CSS3 的 主流 浏览 器 (IE10+)。 





Example 
19-11 Stickerjs 19 
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4. Fattable.js 

图 19-12 所 示 的 Fattable.js 是 一 个 帮助 创建 无 限 滚动 和 无 限行 列 数 的 JavaScript 类 库 。 
比较 大 的 表 〈 多 余 10000 个 单元 格 ) 使 用 DOM 处 理 不 是 很 方便 ， 滚 动 会 变 得 不 均匀 。 同 
时 对 于 比较 大 的 表格 ， 其 增长 的 速度 也 更 快 。 在 这 种 情况 下 ， 让 用 户 去 下 载 或 者 保留 全 部 
数据 是 不 太 可 能 的 。Fattable.js 可 以 很 好 地 处 理 异 常数 据 加 载 。 


omer pm mu p pm se 
cms E en own co t. 
emus ems cas ons onus = 
cm cans u — ca ta 
p em! cau onus pre = 
cm cas omu c-€ m - 
cm ce caus c caa - 
p cn ont æn - < 
tæ cour cn on wi - 
cons p mu cau one am 
onus em cm cans n 

cana om cama taa m ta 
mu carar cana cm eis ee 
coms nas cana coms cone è ca 
mu emus emas mu onu 6m 
æu o ama æu c ca 
cma en mà et C4 w 
cem on cay ed +45) — 而 


图 19-12 Fattable.js 


5. Fn.js 

Fn.js 是 一 个 鼓励 你 使 用 函数 编程 风格 的 可 选 JavaScript 类 库 ， 如 图 19-13 所 示 。 它 是 
基于 性 能 和 规则 来 支持 函数 化 实践 。 为 了 保证 路 径 正 确 , Fn.js 内 部 强制 地 避免 side effects. 
Object Mutation 和 Function state。 支 持 Node.js 或 者 浏览 器 ， 可 以 使 用 常规 的 script 来 引用 
或 者 通过 AMD 加 载 器 ， 例 如 ，RequireJS。 即 将 支持 Bower. Fn.js 基于 MIT LIcensed， 可 
以 在 Github 下 载 。 


A JavaScript library built to 
encourage a functional programming 
style & strategy. 





© </> e5 


Functional First Run Everywhere Open Source 


te browse: 
AMO) 








图 19-13 Fnjs 


6. Progress.js 

图 19-14 所 示 的 Progress.js 是 一 个 帮助 开发 人 员 使 用 JavaScript 和 CSS 3 创建 进度 条 的 
JavaScript 类 库 。 可 以 自己 设计 进度 条 的 模板 或 者 自 定义 ， 也 可 以 使 用 Progess.js 来 展示 加 
载 内 容 的 进度 (如 images、Video 等 ), 可 以 将 它 应 用 到 所 有 页 面 元 素 , 比如 : textbox、 textarea 
其 至 整个 body。 








图 19-14 Progress.js 


19.4.2 jQuery 


1. jQuery 简介 
jQuery 是 一 个 JavaScript 函数 库 ， 是 一 个 轻 量 级 的 “ 写 得 少 、 做 得 多 ”的 JavaScript 库 。 
jQuery 库 包含 以 下 功能 : 
* HTML 元 素 选取 ; 
* HTML 元 素 操 作 ; 
CSS 操作 ; 

。 HTML 事件 函数 ; 

e JavaScript 特效 和 动画 ; 

。 HTML DOM ili J; RM ptc; 

e AJAX; 

e Utilities. 

除 此 之 外 ，JQuery 还 提供 了 大 量 的 插件 。 

目前 网 络 上 有 大 量 开源 的 JavaScript HER, 但 jQuery 是 目前 最 流行 的 JavaScript 框架 ， 
而 且 它 可 以 提供 大 量 的 扩展 。 很 多 大 公司 都 在 使 用 jQuery. 例如 : Google. Microsoft, IBM, 
Netflix 等 。 

2. jQuery 安装 


(1) 在 网 页 中 添加 jQuery 5 
可 以 通过 多 种 方法 在 网 页 中 添加 jQuery。 可 以 使 用 以 下 方法 : 19 
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。 从 www.jquery.com F 4 jQuery 库 ; 

。 从 CDN 中 载 入 jQuery， 如 从 Google 中 加 载 jQuery. 

(2) 下 载 jQuery 

有 两 个 版 本 的 jQuery 可 供 下 载 。 

* Production version: 用 于 实际 的 网 站 中 ， 已 被 精简 和 压缩 。 

* Development version: 用 于 测试 和 开发 〈 未 压缩 ， 它 是 可 读 的 代码 )。 

以 上 两 个 版 本 都 可 以 从 www.jquery.com 中 下 载 。 

(3) CDN 引用 

百度 、 又 拍 云 、 新 浪 、 谷 歌 和 微软 的 服务 器 都 存 有 jQuery。 如果 站 点 用 户 是 国内 的 ， 
建议 使 用 百度 、 又 拍 云 、 新 浪 等 国内 CDN 地 址 ; 如果 站 点 用 户 是 国外 的 可 以 使 用 谷歌 和 
微软 。 例 如 代码 19-2 是 通过 使 用 百度 的 CDN 来 编写 的 一 个 简单 JQuery 事件 。 

代码 19-2 


<!DOCTYPE html> 
<html> 




















«meta charset="utf-8"> 

<body> 

<h2> 这 是 一 个 标题 </h2> 

<p> 这 是 一 个 段落 。</p> 

<p> 这 是 另 一 个 段落 。</p> 

<button> 点 我 </button> 

</body> 

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 

<script> 

$ (document) . ready (function () { 
$ ("button") .click (function () { 

$ ("p").hide(); 

H; 

n; 








</script> 

</html> 

button 事件 单 击 前 后 的 变化 效果 如 图 19-15 和 图 19-16 所 示 。 
ese < >b m ese <> D 
这 是 一 个 标题 这 是 一 个 标题 

这 是 一 个 段落 。 AR 

这 是 另 一 个 段落 。 


AR 





图 19-15 button 事件 单 击 前 图 19-16 button 事件 单 击 后 


19.5 jQuery 详解 


jQuery 是 JavaScript 中 极为 常用 的 第 三 方 类 库 , 它 可 以 极 大 地 化 解 JavaScript 完成 任务 
的 难度 ， 所 以 在 JavaScript 中 着 重 讲解 一 下 。 


19.5.1 jQuery 选择 器 


jQuery 选择 器 允许 对 HTML 元 素 组 或 单个 元 素 进行 操作 。jQuery 选择 器 基于 元 素 的 
id、 类 、 类 型 、 属 性 、 属 性 值 等 “查找 (或 选择 )”HTML 元 素 。 它 是 基于 已 经 存在 的 CSS 选 
择 器 。 除 此 之 外 ， 它 还 有 一 些 自 定义 的 选择 器 。jQuery 中 所 有 选择 器 都 以 美元 符号 开头 : $0。 

1. 元 素 选择 器 

jQuery 元 素 选择 器 基于 元 素 名 选取 元 素 。 如 在 页 面 中 选取 所 有 <p> 元 素 。 


$ ("p") 








用 户 单 击 按钮 后 ， 所 有 <p> 元 素 都 隐藏 。 


$ (document) . ready (function () { 


$ ("bu 


tton").click(function()( 


$("p") -hide(); 


H); 
}); 


2. Hid 选择 器 
jQuery #id 选择 器 通过 HTML 元 素 的 id 属性 选取 指定 的 元 素 。 
页 面 中 元 素 的 id 应 该 是 唯一 的 ， 所 以 想 要 在 页 面 中 选取 唯一 的 元 素 ， 则 需要 通过 #id 


通过 id 选取 元 素 语法 如 下 。 
$("#test") 
当 用 户 单 击 按钮 后 ， 有 id="test" 属 性 的 元 素 将 被 隐藏 。 


$ (document) . ready (function () { 


$ ("bu 


tton") .click (function () { 


$("#test") -hide(); 


}); 
}); 


3. .class 选择 器 
jQuery 类 选择 器 可 以 通过 指定 的 class 查找 元 素 。 
语法 如 下 : 


$(".test") 





HPA 
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$ (document) . ready (function () { 
$ ("button") .click (function () { 
$(".test").hide(); 


4. 更 多 实例 
选择 器 实例 如 表 19-2 所 示 。 


表 19-2 选择 器 实例 


语法 描述 

Sw) 选取 所 有 元 素 

$(this) 选取 当前 HTML 元 素 

$("'p.intro") 选取 class 7j intro 的 <p> 元 素 

$("'p:first") 选取 第 一 个 <p> 元 素 

$("ul li:first") 选取 第 一 个 <ul> 元 素 的 第 一 个 <li> 元 素 

$("ul li:first-child") 选取 每 个 <ul> 元 素 的 第 一 个 <li> 元 素 

$C"[href]") 选取 带 有 bref 属性 的 元 素 

S("aftarget-' blank]") 选取 所 有 target 属性 值 等 于 "_blank" 的 <a> 元 素 
S("a[target!-' blank']") 选取 所 有 target 属性 值 不 等 于 " blank" 的 <a> 元 素 
$(":button") 选取 所 有 type="button" 的 <input> 元 素 和 <button> 元 素 
S("tr:even") 选取 偶数 位 置 的 <tr> 元 素 

$("tr:odd") 选取 奇数 位 置 的 <tr> 元 素 


例如 代码 19-3 使 用 jQuery 选择 器 实现 一 个 页 面 表格 的 背景 改变 效果 。 利 用 $("tr:odd") 
将 table 里 面 奇数 位 置 的 <tr> 元 素 北京 改 为 黄色 。 
代码 19-3 


<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 
</head> 

<body> 


<h1> 欢 迎 访问 我 的 主页 </h1> 


<table border="1"> 
Str» 
<th> 网 站 名 </th> 
<th> 网 址 </th> 
</tr> 
<tr> 
<td>Google</td> 
«td»http://www.google.com«/td» 
«/tr» 














«tr» 

<td>Baidu</td> 

<td>http: //www.baidu.com</td> 

</tr> 

«tr» 

«td» </td> 

<td>http://www.apple.com</td> 

</tr> 

<tr> 

<td> 淘 宝 </td> 

«td»http://www.taobao.com«/td» 

«/tr» 

«tr» 

«td»Facebook«/td» 

«td»http://www.facebook.com«/td» 

«/tr» 

«/table» 

«script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> 

«/script» 

«script» 

$ (document) . ready (function () { 
$("tr:even").css ("background-color","yellow"); 

Hs 


</script> 

</body> 

</html> 

jQuery 选择 器 改变 表格 样式 效果 如 图 19-17 所 示 。 


ese © 


欢迎 访问 我 的 主页 





网 站 名 网 址 
[Google —http/www.google.com 


[Baidu fattp://www.baidu.com 
ETI yJ/www apple.com 
淘宝  fhttp://www.taobao.com 


[Facebook [http://www.facebook.com 











图 19-17 jQuery 选择 器 改变 表格 样式 效果 


19.5.2 jQuery 事件 


1. jQuery 事件 简介 
页 面 对 不 同 访问 者 的 响应 叫 事 件 。 事 件 处 理 程序 指 的 是 当 HIML 中 发 生 某 
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所 调用 的 方法 。 如 : 

。 在 元 素 上 移动 鼠标 ; 

。 选取 单 选 按钮 ; 

。 单 击 元 素 。 

在 事件 中 经 常 使 用 术语 “触发 ”( 或 “激发 "”， 例 如 :“ 当 按 下 按键 时 触发 keypress 事 
件 ”。 常 见 DOM 事件 如 表 19-3 所 示 。 


表 19-3 常见 DOM 事件 


























鼠标 事件 键盘 事件 表单 事件 文档 /窗口 事件 
click keypress submit load 
dblclick keydown change resize 
mouseenter keyup focus scroll 
mouseleave blur unload 

2. 常见 事件 


(1) 文档 就 绪 事件 
通过 查看 jQuery 函数 源 文 件 可 以 发 现 , 所 有 的 jQuery 函数 都 位 于 一 个 document ready 
函数 中 。 


$(document).ready(function()(  // 开 始 写 jQuery 代码 ...}); 


这 是 为 了 防止 文档 在 完全 加 载 〈 就 绪 ) 之 前 运行 jQuery 代码 。 

如 果 在 文档 没有 完全 加 载 之 前 就 运行 函数 , 则 操作 可 能 失败 。 下 面 是 两 个 具体 的 例子 : 
。 试图 隐藏 一 个 不 存在 的 元 素 ; 

。 获得 未 完全 加 载 的 图 像 的 大 小 。 

简洁 写法 (与 以 上 写法 效果 相同 ): 

$ (function () { // 开 始 写 jQuery 代码 ...}); 


以 上 两 种 方式 可 以 选择 喜欢 的 方式 ， 来 实现 文档 就 绪 后 执行 jQuery 方法 。 
(2) click() 
click0 方 法 是 当 按 钮 单 击 事件 被 触发 时 会 调用 一 个 函数 。 该 函数 在 用 户 单 击 HTML 元 
素 时 执行 。 在 下 面 的 实例 中 ， 当 单 击 事件 在 某 个 <p> 元 素 上 触发 时 ， 隐 藏 当前 的 <p> 元 素 。 
$("p") .click (function () { 
$ (this) -hide(); 
1); 





(3) dblclick() 
当 双 击 元 素 时 ,会 发 生 dblclick 事件 。dblclick0 方 法 触发 dblclick 事件 ， 或 规定 当 发 生 
dblclick 事件 时 运行 的 函数 。 





$("p") .click (function () { 
$(this) -hide(); 
}); 


(4) mouseenter() 
当 鼠 标 指针 穿 过 元 素 时 ， 会 发 生 mouseenter 事件 。mouseenter() 方 法 触发 mouseenter 
事件 ， 或 规定 当 发 生 mouseenter 事件 时 运行 的 函数 。 
$("#p1") .mouseenter (function () { 
alert (' 您 的 鼠标 移 到 了 id-"pi" 的 元 素 上 !'); 
Ds 


(5) mouseleave() 
当 鼠 标 指 针 离 开元 素 时 ， 会 发 生 mouseleave 事件 。mouseleave() 方 法 触发 mouseleave 
事件 ， 或 规定 当 发 生 mouseleave 事件 时 运行 的 函数 。 
$("#p1") .mouseleave (function () { 
alert (" 再 见 ， 您 的 鼠标 离开 了 该 段落 。") ; 
}); 
(6) mousedown() 
当 鼠 标 指 针 移 动 到 元 素 上 方 , 并 按 下 鼠标 按键 时 ,会 发 生 mousedown 事件 .mousedown(O 
方法 触发 mousedown 事件 ， 或 规定 当 发 生 mousedown 事件 时 运行 的 函数 。 
$ ("#p1") .mousedown (function () { 
alert ("和 鼠标 在 该 段落 上 按 下 ! "); 
Ds 
(7) mouseup() 
当 在 元 素 上 松 开 鼠标 按钮 时 ， 会 发 生 mouseup 事件 。mouseup() 方 法 触发 mouseup 事 


件 ， 或 规定 当 发 生 mouseup 事件 时 运行 的 函数 。 


$ ("#p1") .mouseup (function () { 
alert ("鼠标 在 段落 上 松 开 。"); 
}); 


(8) hover() 
hover() T EH F RG hk RE. SR BCR LIN, Sef ACHE IS — 4 ER 
H(mouseenter); 当 鼠 标 移 出 这 个 元 素 时 ， 会 触发 指定 的 第 二 个 函数 (mouseleave)。 


$("#p1") -hover ( 
function () { 
alert ("你 进入 了 pli"); 
ty 
function () { 
alert ("拜拜 ! 现在 你 离开 了 pl!"); 
} 
) 7 


(9) focus() 
当 元 素 获 得 焦点 时 ， 发 生 focus 事件 。 当 通过 单 击 选中 元 素 或 通过 Tab 键 定位 到 元 素 
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时 ， 该 元 素 就 会 获得 


i. focus Ù id fit R focus 事件 ， 或 规定 当 发 生 focus 事件 时 运行 的 


$ ("input") . focus (function () { 
$ (this) .css ("background-color", "#cccccc") ; 
}); 


3. 事件 示例 

下 面 代码 19-4 展示 的 是 通过 使 用 jQuery 将 页 面 元 素 中 input 元 素 的 focus 事件 定义 为 : 
当 input 被 focus 时 body 元 素 的 背景 颜色 变 为 灰色 。 

代码 19-4 





<!DOCTYPE html» 

<html> 

<head> 

«meta charset-"utf-8"» 
«title»jQuery Event Sample</title> 
</head> 

<body> 


Name: <input type="text" name="fullname"><br> 
Email: <input type="text" name="email"> 


<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$ (document) . ready (function () { 

$ ("input") . focus (function () { 

$ ("body") .css ("background-color", "#cccccc") 7 

H); 

he 








</script> 

</body> 

</html> 

当 没 有 focus input 元 素 时 ， 显 示 效 果 如 图 19-18 所 示 。 
eee «imn 
Name: 
Email: 





图 19-18 ”没有 focus input 元 素 时 显示 效果 


当 单 击 任意 一 个 输入 框 时 ， 显 示 效 果 见 图 19-19 所 示 。 





图 19-19 单 击 Focus 输入 框 时 显示 效果 


19.53 jQuery 内 容 修 改 


jQuery 能 够 对 HTML 中 所 有 (DOM) 元 素 进 行 操作 ， 并 且 所 有 相关 方法 都 与 选择 器 
进行 了 封装 ， 所 以 相 比 于 原生 的 JavaScript 更 具备 灵活 性 和 易 用 性 。 


1. 设置 和 获取 

获得 HTML 内 容 主要 通过 text0、html0、val0 以 及 attr0 完 成 。 

e text() 

设置 或 返回 所 选 元 素 的 文本 内 容 ， 不 包括 HTML 元 素 。 

。html0 

设置 或 返回 所 选 元 素 的 内 容 〈 包 括 HTML 标记 )。 
$("£btnl").click(function()( alert("Text: " + $("#test").text()); )):; 
$("#btn2") .click(function(){ alert("HTML: " + $("£4test").html1()); })7 
e val() 

设置 或 返回 表单 字段 的 值 。 

$ ("#btn1") .click(function(){ alert(" 值 为 : " + $("4test").val(Q); )); 

e attr() 

用 于 获取 属性 值 。 


$("button") .click (function () { 
alert ($("#runoob") .attr ("href") ); 
); 


同时 ， 通 过 以 上 方法 还 可 以 直接 设置 HTML 元 素 的 相应 属性 。 


$("#btn1") .click (function (){ 第 
$("#test1") .text ("Hello world!"); 19 
x 
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Ds 
$("#btn2") .click(function(){ 
$("#test2") .html ("<b>Hello world!</b>"); 
}); 
$("#btn3") .click (function () { 
$("#test3") .val ("jQuery"); 
nr 
$ ("button") .click (function () { 
$("#runoob") .attr ("href", "http: //www.example.com/jquery") ; 
}); 


例如 代码 19-5 使 用 的 是 上 述 方法 来 修改 网 页 内 容 。 
代码 19-5 


<!DOCTYPE html» 
<html> 
<head> 
«meta charset-"utf-8"» 
<script src-"https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"» 
</script> 
<script> 
$ (document) . ready (function () { 
$("#btn1l") .click (function () { 
$("#testl") .text ("Hello world!"); 
); 
$("#btn2") .click (function () { 
$("#test2") .html ("<b>Hello world!«/b»"); 
H); 
$("#btn3") .click (function () { 
$("#test3") .val ("jQuery"); 
); 
he 
</script> 
</head> 


<body> 

«p id="test1"> 这 是 一 个 段落 。</p> 

«p id="test2"> 这 是 另外 一 个 段落 。</p> 

<p> 输 入 框 : <input type="text" id-"test3" value=" 输 入 内 容 "></p> 
«button id="btnl"> 设 置 文本 </button> 

«button id="btn2"> 设 置 HTML«/button» 

«button id="btn3"> 设 置 值 </button> 

</body> 

</html> 


修改 前 HTML 内 容 如 图 19-20 所 示 。 


单 击 页 面 中 的 三 个 按钮 ， 触 发 jQuery 事件 显示 效果 ， 即 修改 后 HTML 内 容 如 图 19-21 
所 示 。 











这 是 一 个 段落 。 Hello world! 

这 是 另外 一 个 段落 。 Hello world! 

MEARE 输入 框 :Iauey | 
设置 文本 || 设置 HTML | | 设置 值 | | 设置 文本 || 设置 HTML || 设置 值 




















图 19-20 ”修改 前 HTML 内 容 图 19-21 修改 后 HTML 内 容 


2. 增删 元 素 

(1) jQuery 主要 提供 了 四 个 方法 增加 元 素 。 
QD append): 在 被 选 元 素 的 结尾 插入 内 容 。 
Q) prependQ: 在 被 选 元 素 的 开头 插入 内 容 。 
@ after): 在 被 选 元 素 之 后 插入 内 容 。 

@ before): 在 被 选 元 素 之 前 插入 内 容 。 
基本 使 用 方法 如 下 代码 所 示 : 

$ ("p") .append (" 追 加 文本 ") ; 

$ ("p") .prepenad (" 在 开头 追加 文本 ") ; 

$ ("p") .after(" 在 后 面 添加 文本 ") ; 

$ ("p") .before (" 在 前 面 添加 文本 ") ; 


下 面 代码 19-6 提供 一 个 简单 的 样 例 。 
代码 19-6 





<!DOCTYPE html» 
<html> 
<head> 
«meta charset-"utf-8"» 
<title>Append Example</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$ (document) . ready (function () { 
$ ("#btn1") .click (function () { 
$ ("p") .prepend ("<b> 在 开头 追加 文本 </b>。 "); 
he 
$("#btn2") .click (function () { 
$ ("o1") .prepend ("<1i> 在 开头 添加 列表 项 </1i>"); 
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)); 
}); 
</script> 
</head> 
<body> 


<p> 这 是 一 个 段落 。</p> 

<p> 这 是 另外 一 个 段落 。</p> 

<ol> 

<1i> 列 表 1</1i> 

<1i> 列 表 2«/1i» 

<1i> 列 表 3</1i> 

</ol> 

«button id="btn1"> 添 加 文本 </button> 
<button id="btn2"> 添 加 列表 项 </button> 


</body> 
</html> 


未 添加 元 素 前 显示 效果 如 图 19-22 所 示 。 
添加 元 素 后 显示 效果 见 图 19-23。 


这 是 一 个 段落 。 在 开头 追加 文本 。 这 是 一 个 段落 。 

这 是 另外 一 个 段落 。 在 开头 追加 文本 。 这 是 另外 一 个 段落 。 
1. 列 表 1 1. 在 开头 添加 列表 项 
2. 列 表 2 2 列表 1 
3. 列 表 3 3 列表 2 

添加 文本 | | 添加 列表 项 4. 列 表 3 

添加 文本 || 添加 列表 项 











图 19-22 未 添加 元 素 前 的 显示 效果 图 19-23 ”添加 元 素 后 的 显示 效果 


(2) jQuery 主要 提供 了 两 个 方法 删除 元 素 。 
(D remove(): 删除 被 选 元 素 〈 及 其 子 元 素 )。 
@ empty): 从 被 选 元 素 中 删除 子 元 素 。 


$("p").remove(); 

$("p").empty(); 

同时 jQuery remove(0 方 法 也 可 接受 一 个 参数 ， 人 允许 对 被 删 元 素 进行 过 滤 。 该 参数 可 以 
是 任何 jQuery 选择 器 的 语法 。 下 面 的 例子 为 删除 class='"italic" 的 所 有 <p> 元 素 。 


<!DOCTYPE html» 
<html> 


<head> 

«meta charset-"utf-8"» 

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> 

</script> 

<script> 

$ (document) . ready (function () { 
$ ("button") .click (function () { 

$("p").remove(".italic"); 

$3 

}); 

</script> 

</head> 

<body> 


<p> 这 是 一 个 段落 。</p> 

«p class="italic"><i> 这 是 另外 一 个 段落 。</i></p> 

<p class="italic"><i> 这 是 另外 一 个 段落 。</i></p> 
<button> 移 除 所 有 class-"italic" 的 p 元 素 。</button> 


</body> 

</html> 

<p> 标 签 删除 前 效果 如 图 19-24 所 示 。 
<p> 标 签 删除 后 如 图 19-25 所 示 。 


这 是 一 个 段落 。 这 是 一 个 段落 。 





A8 55) — TB 移 除 所 有 class="italic’ 的 p 元 素 。 
EB M PRE. 


BMA class= Ntalic 8) p T° 

















图 19-24 ”<p> 标 签 删除 前 效果 图 19-25 <p> 标签 删除 后 效果 


19.5.4 jQuery 4&4 


jQuery 可 以 高 效 地 遍历 HTML 页 面 的 各 种 元 素 , 尤其 是 各 种 选择 器 和 子 、 父 控件 操作 
函数 的 提供 ， 让 元 素 的 遍历 更 加 灵活 、 方 便 。 
常见 的 遍历 方法 有 三 种 。 
OD 选择 器 + 遍历 
$('div') .each (function (i) { 
//i 是 索引 值 
//this 表示 获取 遍历 每 一 个 dom 对 象 


}); 
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又 如 : 


$('div') .each (function (index, domEle){ 
//index 是 索引 值 
//domEle 表示 获取 遍历 每 一 个 dom 对 象 
}); 


(25 更 适用 的 遍历 方法 
© 先 获 取 某 个 集合 对 象 ; 
。 遍历 集合 对 象 的 每 一 个 元 素 。 
var d=$ ("div"); 
$.each (d, function (index, domEle) { 
//d 是 要 遍历 的 集合 
//index 就 是 索引 值 
//domEle 表示 获取 遍历 每 一 个 dom 对 
he 


jQuery 还 提供 了 众多 方法 来 支持 元 素 间 复杂 的 遍历 逻辑 ，jQuery 常见 遍历 方法 如 表 19-4 
所 示 。 


表 19-4 jQuery 常见 遍历 方法 














方法 描述 

add() 把 元 素 添加 到 匹配 元 素 的 集合 中 

addBack() 把 之 前 的 元 素 集 添加 到 当前 集合 中 

andSelf() 在 版 本 1.8 中 被 废弃 。addBack0 的 别名 

children() 返回 被 选 元 素 的 所 有 直接 子 元 素 

closest() 返回 被 选 元 素 的 第 一 个 祖先 元 素 

contents() 返回 被 选 元 素 的 所 有 直接 子 元 素 〈 包 含 文本 和 注释 节点 ) 

each() 为 每 个 匹配 元 素 执行 函数 

end() 结束 当前 链 中 最 近 一 次 的 筛选 操作 ， 并 把 匹配 元 素 集合 返回 到 前 一 次 的 状态 

eq0 返回 带 有 被 选 元 素 的 指定 索引 号 的 元 素 

filter) 把 匹配 元 素 集合 缩减 为 匹配 选择 器 或 匹配 函数 返回 值 的 新 元 素 

find0 返回 被 选 元 素 的 后 代 元 素 

first() 返回 被 选 元 素 的 第 一 个 元 素 

has() 返回 拥有 一 个 或 多 个 元 素 在 其 内 的 所 有 元 素 

isQ) 根据 选择 器 /元 素 /iQuery 对 象 检查 匹配 元 素 集合 , 如 果 存 在 至 少 一 个 匹配 元 素 ， 
则 返回 true 

last() 返回 被 选 元 素 的 最 后 一 个 元 素 

map() 把 当前 匹配 集合 中 的 每 个 元 素 传递 给 函数 ， 产 生 包 含 返回 值 的 新 jQuery WR 

next() 返回 被 选 元 素 的 后 一 个 同 级 元 素 

nextAIl() 返回 被 选 元 素 之 后 的 所 有 同 级 元 素 

nextUntil() 返回 介 于 两 个 给 定 参数 之 间 的 每 个 元 素 之 后 的 所 有 同 级 元 素 


not() 从 匹配 元 素 集合 中 移 除 元 素 





BR 





方法 描述 

offsetParent() 返回 第 一 个 定位 的 父 元 素 

parent() 返回 被 选 元 素 的 直接 父 元 素 

parents() 返回 被 选 元 素 的 所 有 祖先 元 素 

parentsUntil() 返回 介 于 两 个 给 定 参 数 之 间 的 所 有 祖先 元 素 

prev() 返回 被 选 元 素 的 前 一 个 同 级 元 素 

prevAll0 返回 被 选 元 素 之 前 的 所 有 同 级 元 素 

prevUntil() 返回 介 于 两 个 给 定 参 数 之 间 的 每 个 元 素 之 前 的 所 有 同 级 元 素 
siblings() 返回 被 选 元 素 的 所 有 同 级 元 素 

slice() 把 匹配 元 素 集合 缩减 为 指定 范围 的 子 集 


代码 19-7 提供 一 个 利用 children 方法 进行 遍历 的 实例 , 例子 中 通过 children0 函 数 改 变 
了 元 素 子 节点 的 边框 颜色 。 
代码 19-7 


<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8"» 
<title> 遍 历 实例 </title> 
<style> 
.descendants *{ 
display: block; 
border: 2px solid lightgrey; 
color: lightgrey; 
padding: 5px; 
margin: 15px; 
} 
</style> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$ (document) . ready (function () { 
$("ul").children().css(("color":"red","border":"2px solid red"}); 
}); 
</script> 
</head> 
<body class-"descendants"»body (曾祖 先 节点 ) 


<div style="width:500px;">div (祖先 节点 ) 
<ul>ul (直接 父 节点 ) 
«li»li (FWA) 


<span>span ( 孙 节 点 ) </span> 第 
</li> 19 
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</ul> 
</div> 
</body> 
</html> 
Children( 方 法 遍历 实例 显示 结果 如 图 19-26 所 示 。 
body (曾祖 先 节点 ) 
ktm) 








图 19-26 ”Children0 方 法 遍历 实例 显示 结果 


l. 创建 一 个 长 度 为 10 的 数组 ， 并 对 其 进行 排序 ， 输 出 排序 前 和 排序 后 的 结果 。 
2. 打印 当前 日 期 到 控制 台 。 
3. 需要 使 用 表单 接受 请 求 的 URL， 应 该 使 用 表单 的 什么 方法 实现 ? (€ ) 
A. action 
B. submit 
C. reset 
D. send 
4. 下 列 哪个 是 jQuery 的 类 选择 器 语法 ? (C ) 
A. $("p") 
B. $("#test") 
C. $("test") 
D. $(":button") 
5. 尝试 为 一 个 网 页 编写 简单 的 脚本 ， 使 用 jQuery 移 除 网 页 上 所 有 内 容 〈 提 示 : 使 月 
remove 和 遍历 功能 ) 。 








第 20 章 代码 规范 





20.1 文件 及 结构 


20.1.1 文件 


。 建议 : 
JavaScript 文件 使 用 无 BOM 的 UTF-8 编码 。 
解释 : 


UTF-8 编码 具有 更 广泛 的 适应 性 。BOM 在 使 用 程序 或 工具 处 理 文件 时 ， 可 能 造成 不 
必要 的 干扰 。 

。 建议 : 

在 文件 结尾 处 ， 保 留 一 个 空 行 。 


20.1.2 结构 


1. 缩 进 
e 建议 : 


使 用 四 个 空格 作为 一 个 缩 进 层级 ， 不 允许 使 用 两 个 空格 或 tab 字符 。switch 下 的 case 
和 default 必须 增加 一 个 缩 进 层 级 。 
示例 : 


//good 
switch(variable) { 
case '1': 
//do... 
break; 


case '2': 


//do... 
break; 
default: 
PL OO ier 
} 
//bad 


switch(variable) { 
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case "LS 
//do... 
break; 
case T2. 
EL 
break; 
default: 
//do... 
} 


2. 空格 

。 建议 : 

二 元 运算 符 两 侧 必须 有 一 个 空格 ， 一 元 运算 符 与 操作 对 象 之 间 不 允许 有 空格 。 
示例 : 


var a = !arr.length; 
att; 
a=b+t+c 


。 建议 : 
用 作 代 码 块 起 始 的 左 大 括号 { 前 必须 有 一 个 空格 。 
示例 : 


//good 
if(condition) ( 
} 


while (condition) { 
} 


function funcName() { 
} 


//bad 
if (condition) { 
} 


while (condition) { 
} 


function funcName () { 
} 


。 建议 : 
if. else, for, while, function, switch, do, try, catch, finally 关键 字 后 ， 必 须 有 一 


个 空格 。 


示例 : 


//good 
if(condition) { 
} 


while (condition) { 
} 


(function() { 
HO; 


/ /bad 
if(condition) ( 
) 


while(condition) ( 
} 


(function() { 
HO; 


。 建议 : 
在 对 象 创建 时 ， 属 性 中 的 “:” 之 后 必须 有 空格 ,“:” 之 前 不 允许 有 空格 。 
示例 : 


//good 
var obj = { 


。 建议 : 
在 函数 声明 、 具 名 函数 表达 式 、 函 数 调用 中 ， 函 数 名 与 “(” 之 间 不 允许 有 空格 。 
示例 : 第 
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function funcName() { 
} 


var funcName = function funcName() { 
JF 


funcName () ; 


//bad 
function funcName() ( 
} 


var funcName = function funcName() { 
1 


funcName () ; 


。 建议 : 
“,” 和 “;” 前 不 允许 有 空格 。 
示例 : 


//good 
callFunc(a, b); 


/ /bad 
callFunc(a , b) ; 


. 建议 : 

在 函数 调用 、 函 数 声明 、 括 号 表达 式 、 属 性 访问 ， 以 及 让、for、while、switch、catch 
等 语句 中 ，0 和 [内 紧 贴 括号 部 分 不 允许 有 空格 。 

示例 : 


//good 

callFunc(paraml, param2, param3); 
save(this.list[this.indexes[i]l]); 
needIncream &&(variable += increament); 


if(num » list.length) ( 
} 


while(len--) { 
} 


//bad 


callFunc( paraml, param2, param3 ); 


save( this.list[ this.indexes[ i] ] ); 


needIncreament &&( variable += increament ); 


if( num » list.length ) ( 
} 


while( len-- ) { 
} 


。 建议 : 


单行 声明 的 数组 与 对 象 ， 如 果 包 含 元 素 ，{} 和 [] 内 紧 贴 括号 部 分 不 允许 包含 空格 。 


解释 : 


声明 包含 元 素 的 数组 与 对 象 ， 只 有 当 内 部 元 素 的 形式 较为 简单 时 ， 才 允许 写 在 一 行 。 


而 在 元 素 复 杂 的 情况 下 ， 应 该 换行 书写 。 


示例 : 

//good 

var arrl = []; 

var arr2 = [1, 2, 3]; 


var objl = {}; 
(name: 'obj'); 


var obj2 

var obj3 = ( 
name: 'obj', 
age: 20, 
sex: 1 

}; 


/ /bad 

var arrl = [ ]; 

var arr2 = [ 1, 2, 3 I; 

var objl = ( } 

var obj2 = ( name: 'obj' }; 


d 


var obj3 - (name: 'obj', age: 20, sex: 


e 建议 : 

行 尾 不 得 有 多 余 的 空格 、 换 行 。 
。 建议 : 

每 个 独立 语句 结束 后 必须 换行 。 
e 建议 : 

每 行 不 得 超过 120 个 字符 。 
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解释 : 

超 长 的 不 可 分 割 的 代码 允许 例外 ， 比 如 复杂 的 正则 表达 式 。 长 字符 串 不 在 例外 之 列 。 
。 建议 : 

运算 符 处 换行 时 ， 运 算 符 必须 在 新 行 的 行 首 。 

示例 : 

//good 


if (user.isAuthenticated () 

&& user.isInRole('admin') 

&& user.hasAuthority ('add-admin') 

|| user.hasAuthority ('delete-admin') 
) 4 

//Code 


var result = numberl + number2 + number3 
+ number4 + number5; 


/ /bad 

if(user.isAuthenticated() && 
user.isInRole('admin') && 
user.hasAuthority('add-admin') || 
user.hasAuthority('delete-admin')) { 
//Code 


var result = numberl + number2 + number3 + 
number4 + number5; 


. 建议 : 
在 函数 声明 、 函 数 表达 式 、 函 数 调用 、 对 象 创建 、 数 组 创建 、for 语句 等 场景 中 ， 不 允 
许 在 “,” 或“;” 前 换行 。 


示例 : 
//good 
var obj = { 
as dy 
b: 2, 
c: 3 
i 
foo ( 


aVeryVeryLongArgument, 
anotherVeryLongArgument, 
callback 


foo ( 
aVeryVeryLongArgument 
, anotherVeryLongArgument 
, callback 

) 


。 建议 : 
不 同行 为 或 迎 辑 的 语句 集 ， 使 用 空 行 隔 开 ， 更 易 阅 读 。 
示例 : 


// 仅 为 按 逻 辑 换行 的 示例 ， 不 代表 setstyle 的 最 优 实现 


function setStyle(element, property, value) { 


if (element == null) { 
return; 
} 
element.style[property] = value; 


20.2 ”命名 和 注释 


20.2.1 命名 
。 建议 : 
变量 使 用 Camel 命名 法 。 
示例 : 
var loadingModules = {}; 
。 建议 : 
常量 使 用 全 部 字母 大 写 ， 单 词 间 下 画 线 分 隔 的 命名 方式 。 
示例 : 














var HTML ENTITY = {}; 














d 建议 : 第 
函数 使 用 Camel 命名 法 。 20 
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示例 : 


function stringFormat (source) { 
} 


。 建议 : 

函数 的 参数 使 用 Camel 命名 法 。 
示例 : 

function hear(theBells) { 

} 


. 建议 : 
类 使 用 Pascal 命名 法 。 
示例 : 


function TextNode(options) { 
) 


。 建议 : 
类 的 方法 /属性 使 用 Camel 命名 法 。 
示例 


function TextNode(value, engine) { 
this.value = value; 
this.engine = engine; 


TextNode.prototype.clone = function() { 
return this; 
}; 


。 建议 : 

枚 举 变量 使 用 Pascal 命名 法 ， 枚 举 的 属性 使 用 全 部 字母 大 写 ， 单 词 间 下 画 线 分 隔 的 命 
名 方式 。 

示例 : 


var TargetState = { 
READING: 1, 


READED: 2, 
APPLIED: 3, 
READY: 4 

1 

= 建议 : 


命名 空间 使 用 Camel 命名 法 。 


示例 : 

equipments.heavyWeapons = {}; 

。 建议 : 

由 多 个 单词 组 成 的 缩写 词 ， 在 命名 中 ， 根 据 当前 命名 法 和 出 现 的 位 置 ， 所 有 字母 的 大 
小 写 应 与 首 字母 的 大 小 写 保持 一 致 。 

示例 : 

function XMLParser() { 


} 


function insertHTML(element, html) { 
} 


var httpRequest = new HTTPRequest (); 
。 建议 : 

类 名 使 用 名 词 。 

示例 : 

function Engine(options) { 

} 

a 建议 : 

函数 名 使 用 动 宾 短 语 。 

示例 : 


function getStyle(element) { 
} 


。 建议 : 
boolean 类 型 的 变量 使 用 is 或 has 开头 。 
示例 : 


var isReady = false; 
var hasMoreCommands = false; 


。 建议 : 
Promise 对 象 用 动 宾 短 语 的 进行 时 表达 。 
示例 : 


var loadingData = ajax.get('url'); 
loadingData.then (callback) ; 


20.2.2 注释 
1. 单行 注释 


。 建 议 : 
必须 独占 一 行 。// 后 跟 一 个 空格 ， 缩 进 与 下 一 行 被 注释 说 明 的 代码 一 致 。 pa 
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2. 多 行 注释 

d 建议 : 

避免 使 用 /*…*/ 这 样 的 多 行 注释 。 有 多 行 注释 内 容 时 ， 使 用 多 个 单行 注释 。 
3. 文档 化 注释 

。 建议 : 
为 了 便于 代码 阅读 和 自 文档 化 ， 以 下 内 容 必须 包含 以 /**…*/ 形 式 的 块 注释 中 。 
。 建议 : 

文档 注释 前 必须 空 一 行 。 

。 建议 : 

自 文档 化 的 文档 说 明 what， 而 不 是 how. 


1. JavaScript 推荐 使 用 什么 样 的 编码 模式 ， 并 解释 这 样 使 用 的 原因 。 
2. JavaScript 主要 有 哪 两 种 注释 方式 ? 
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这 一 章 将 通过 几 个 样 例 来 进一步 说 明 JavaScript 的 功能 。 
211 ”俄罗斯 方块 


21.1.1 代码 及 展示 


代码 21-1 提供 一 个 极为 简单 的 JavaScript 来 实现 俄罗斯 方块 游戏 。 
代码 21-1 


<!DOCTYPE html» 
<html> 
<head> 
</head> 
<body> 
<div id-"box" style="width:252px;font:25px/25px 宋体 ;background:#000; 
color:#9f9;border:#999 20px ridge; text-shadow:2px 3px lpx #0f0; "></div> 
<script> 
var map = eval("[" + Array(23).join("Ox801,") + "Oxfff]"); 
var tatris = [[0x6600], [0x2222, 0xf00], [0xc600, 0x2640], [0x6c00, 
0x4620], [0x4460, 0x2e0, 0x6220, 0x740], [0x2260, 0xe20, 0x6440, 
0x4700], [0x2620, 0x720, 0x2320, 0x2700]]; 
var keycom - ( "38": "rotate(1)", "40 "down()", "37": "move(2,1)", 
"39": "move(0.5,-1)" ); 
var dia, pos, bak, run; 





function start() ( 

tatris[--(Math.random() * 7)]; 

bak = pos { fk: [], y: 0, x: 4, s: ~~(Math.random() * 4) ]); 
rotate (0); 


Li 


dia 


} 
function over() { 
document .onkeydown = null; 
clearInterval (run); 
alert ("GAME OVER"); 
} 
function update (t) { 
bak = { fk: pos.fk.slice(0), y: pos-y, x: pos.x, S: pos.s }; 
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if (t) return; 
for (var i = 0, a2 = ""; i < 22; i++) 
a2 += map[i] .toString(2).slice(1, -1) + "<br/>"; 
for (var i= 0, n; i < 4; i++) 
if (/([^0]4) /.test (bak. f£k[i] .toString (2) .replace(/1/g, "\u25al"))) 
a2 =a2.substr(0, n= (bak.y+i+1) * 15 - RegExp.$_.length 
- 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length) ; 
document .getElementBylId ("box") .innerHTML = a2.replace(/1/g, 
"\u25a0") .replace(/0/g, "Nu3000") ; 
} 
function is() { 
for (var i = 0; i < 4; i++) 
if ((pos.fk[i] & map[pos.y + i]) != 0) return pos = bak; 
} 
function rotate(r) { 
var f - dia[pos.s = (pos.s + r) % dia.length]; 
for (var i = 0; i < 4; i++) 
pos.fk[i] = (f >> (12 - i * 4) & 15) << pos.x; 
update (is()); 
) 
function down() ( 
++pos.y; 
if (is()) { 
for (var i = 0; i < 4 && pos.y + i < 22; i++) 
if ((map[pos.y + i] |= pos.fk[i]) == Oxfff) 
map.splice(pos.y + i, 1), map.unshift (0x801); 
if (map[1] != 0x801) return over(); 
start(); 
} 
update (); 
} 
function move(t, k) { 
pos.x += k; 
for (var i = 0; i < 4; i++) 
pos.fk[i] *= t; 
update (is()); 
} 
document.onkeydown = function (e) { 
eval (keycom[(e ? e : event) .keyCode]); 
pr 
start(); 
run = setInterval("down()", 400); 
</script> 
</body> 
</html> 


俄罗斯 方块 游戏 效果 如 图 21-1 所 示 。 





图 21-1 俄罗斯 方块 游戏 效果 


21.1.2 代码 分 析 
«div id="box" style-"width:252px; font:25px/25px 宋体 ;background:#000; 
Color:#9f9;border:#999 20px ridge;text-shadow:2px 3px lpx #0f0;"></div> 
这 段 代码 显示 出 一 个 游戏 界面 , 通过 设置 一 个 DIV 的 border, color 等 属性 ， 尤 其 注意 
border 属性 的 ridge 参数 ， 让 游戏 能 够 在 一 个 具有 立体 感 的 空间 里 进行 。 





var map = eval("[" + Array(23).join("0x801,") + "Oxfff]"); 

var tatris = [[0x6600], [0x2222, Oxf00], [0xc600, 0x2640], [0x6c00, 0x4620], 
[0x4460, 0x2e0, 0x6220, 0x740], [0x2260, 0xe20, 0x6440, 0x4700], [0x2620, 
0x720, 0x2320, 0x2700]]; 

var keycom - ( "38": "rotate(1)", "40": "down()", "37": "move(2,1)", "39": 
"move(0.5,—1)" }7 


var dia, pos, bak, run; 


这 段 代 码 初始 化 了 游戏 中 的 参数 ， 以 及 键盘 动作 对 于 页 面 元 素 修改 的 HTML 代码 。 代 
码 最 为 有 趣 的 是 使 用 了 字符 来 描绘 方块 的 移动 轨迹 。 通 过 Chrome 的 元 素 查 看 功能 我 们 可 
以 看 到 以 下 界面 如 图 21-2 所 示 。 

可 以 发 现 游戏 时 刻 都 在 更 新 box 元 素 的 文字 内 容 ， 让 这 些 文字 内 容 对 齐 就 像 一 个 个 方 
块 在 移动 。 

中 间 的 函数 大 多 数 都 比较 好 理解 ， 闻 不作 具体 阐释 。 下 面 的 这 个 方法 值得 注意 。 

document .onkeydown = function (e) { 


eval (keycom[(e ? e : event) .keyCode]) ; 
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图 21-2 Chrome 元 素 检查 器 界面 


当 每 次 按 下 键盘 时 会 触发 onkeydown 事件 ， 将 按 下 的 键 通过 e 变量 传 入 ， 在 通过 eval 
方法 连接 一 系列 操作 ， 最 后 会 触发 keycom 方法 ， 通 过 识别 不 同 的 按键 例如 上 键 对 应 38 号 
指令 ， 调 用 rotate 方法 ， 使 得 当前 的 方块 发 生 旋 转 。 


212 it X 器 


21.2.1 代码 及 展示 


代码 21-2 使 用 JavaScript 编写 一 个 美观 的 计算 器 ， 这 里 会 更 多 地 使 用 前 面 学 习 过 的 
CSS3 和 HIML 知识 编写 ， 这 也 让 读者 能 够 更 好 地 看 到 HIML、CSS 和 JavaScript 之 间 的 
配合 关系 。 

代码 21-2 


<div id-"calculator"» 
<!-- Screen and clear key --> 
<div class="top"> 
<span class="clear">C</span> 
<div class="screen"></div> 
</div> 


<div class="keys"> 
<!-- operators and other keys --> 
<span>7</span> 
<span>8</span> 
<span>9</span> 


<span class="operator">+</span> 


<span>4</span> 

<span>5</span> 

<span>6</span> 

<span class-"operator"»-«/span» 
<span>1</span> 

<span>2</span> 

<span>3</span> 

<span class="operator">+</span> 
<span>0</span> 

<span>.</span> 

<span class="eval">=</span> 
<span class="operator">x</span> 

</div> 
</div> 


<style type="text/css"> 
/* Basic reset */ 
E 
margin: 0; 
padding: 0; 
box-sizing: border-box; 


/* Better text styling */ 


font: bold 14px Arial, sans-serif; 


/* Finally adding some IE9 fallbacks for gradients to finish things up */ 


/* A nice BG gradient */ 
html ( 
height: 100%; 
background: white; 
background: radial-gradient(circle, #fff 20$, #ccc); 
background-size: cover; 


/* Using box shadows to create 3D effects */ 
#calculator { 

width: 325px; 

height: auto; 


margin: 100px auto; 
padding: 20px 20px 9px; 
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background: linear-gradient (#9dd2ea, #8bceec); 
border-radius: 3px; 


box-shadow: Opx 4px #009de4, Opx 10px 15px rgba(0, 0, 


/* Top portion */ 
.top span.clear { 
float: left; 


/* Inset shadow on the screen to create indent */ 
.top .screen { 

height: 40px; 

width: 212px; 


float: right; 


padding: 0 10px; 


background: rgba(0, 0, 0, 0.2); 
border-radius: 3px; 
box-shadow: inset Opx 4px rgba(0, 0, 0, 0.2); 


/* Typography */ 

font-size: 17px; 

line-height: 40px; 

color: white; 

text-shadow: lpx lpx 2px rgba(0, 0, 0, 0.2); 
text-align: right; 

letter-spacing: 1px; 


/* Clear floats */ 
.keys, .top (overflow: hidden; } 


/* Applying same to the keys */ 
-keys span, .top span.clear ( 
float: left; 
position: relative; 
top: 0; 


cursor: pointer; 


width: 66px; 
height: 36px; 


background: white; 
border-radius: 3px; 
box-shadow: Opx 4px rgba(0, 0, 0, 0.2); 


margin: 0 7px llpx 0; 
color: 4888; 


line-height: 36px; 
text-align: center; 


/* prevent selection of text inside keys */ 


user-select: none; 


/* Smoothing out hover and active states using css3 transitions */ 


transition: all 0.2s ease; 


/* Remove right margins from operator keys */ 


/* style different type of keys (operators/evaluate/clear) differently */ 


-keys span.operator ( 
background: £FFFOF5; 
margin-right: 0; 


-keys span.eval ( 
background: £$f1ff92; 
box-shadow: Opx 4px #9da853; 
color: #888e5f; 


.top span.clear { 
background: #f£f9fa8; 
box-shadow: Opx 4px #f£f£7c87; 
color: white; 


/* Some hover effects */ 

-keys span:hover { 
background: #9c89f6; 
box-shadow: Opx 4px #6b54d3; 
color: white; 


-keys span.eval:hover { 
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background: #abb850; 
box-shadow: Opx 4px #717a33; 
color: #f£fffff; 


-top span.clear:hover { 
background: #f£68991; 
box-shadow: Opx 4px #d3545d; 


color: white; 


/* Simulating "pressed" effect on active state of the keys by removing the 
box-shadow and moving the keys down a bit */ 
.keys span:active { 

box-shadow: Opx Opx #6b54d3; 

top: 4px; 


.keys span.eval:active { 
box-shadow: 0px Opx #717a33; 
top: 4px; 


.top span.clear:active { 
top: 4px; 
box-shadow: 0px Opx #d3545d; 


«/style» 


«script type-"text/JavaScript"» 
//Get all the keys from document 
var keys = document.querySelectorAll('£calculator span'); 
var operators = ["#", "=", "x"; "+]J; 
var decimalAdded = false; 


//Add onclick event to all the keys and perform operations 
for(var i = 0; i < keys.length; i++) { 
keys[i].onclick = function(e) { 
//Get the input and button values 
var input = document.querySelector('.screen'); 
var inputVal = input.innerHTML; 
var btnVal = this.innerHTML; 


//Now, just append the key values (btnValue) to the input string and 
//finally use JavaScript's eval function to get the result 
//If clear key is pressed, erase everything 
if(btnVal == 'C') { 
input.innerHTML = ''; 
decimalAdded = false; 


//If eval key is pressed, calculate and display the result 
else if(btnVal == '=") ( 
var equation 


inputVal; 
var lastChar = equation[equation.length - 1]; 


[ 


//Replace all instances of x and + with * and / respectively. This 
//can be done easily using regex and the 'g' tag which will replace 


//all instances of the matched character/substring 
equation = equation.replace(/x/g, '*').replace(/+/g, '/'); 


//Final thing left to do is checking the last character of the 

//equation. If it's an operator or a decimal, remove it 

if(operators.indexOf(lastChar) > -1 || lastChar == '.") 
equation - equation.replace(/.$/, ''); 


if (equation) 
input.innerHTML = eval(equation); 


decimalAdded - false; 


//Basic functionality of the calculator is complete. But there are 
//some problems like 

//1. No two operators should be added consecutively. 

//2. The equation shouldn't start from an operator except minus 
//3. not more than 1 decimal should be there in a number 


//We'll fix these issues using some simple checks 
//indexOf works only in IE9+ 


else if(operators.indexOf (btnVal) > -1) { 
//Operator is clicked 





//Get the last character from the equation 
var lastChar = inputVal[inputVal.length - 1]; 第 


//Only add operator if input is not empty and there is no operator 
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at the last 
if(inputVal != '' && operators.indexOf(lastChar) == -1) 
input.innerHTML += btnVal; 


//Allow minus if the string is empty 
else if(inputVal == '' && btnVal == '-') 
input.innerHTML += btnVal; 


//Replace the last operator (if exists) with the newly pressed 

//operator 

if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) { 
//Here, '.' matches any character while $ denotes the end of 
//string, so anything (will be an operator in this case) at the 
//end of string will get replaced by new operator 
input.innerHTML = inputVal.replace(/.$/, btnVal); 


decimalAdded=false; 


//Now only the decimal problem is left. We can solve it easily using 
//a flag 'decimalAdded' which we'll set once the decimal is added and 
//prevent more decimals to be added once it's set. It will be reset when 
//an operator, eval or clear key is pressed. 
else if(btnVal == '.') { 
if (!decimalAdded) { 
input.innerHTML += btnVal; 
decimalAdded = true; 


//if any other key is pressed, just append it 
else { 
input.innerHTML += btnVal; 


//prevent page jumps 
e.preventDefault (); 


} 
</script> 


JavaScript 计算 器 显示 效果 如 图 21-3 所 示 。 





图 21-3 JavaScript 计算 器 显示 效果 


21.2.2 代码 分 析 
接 下 来 着 重 分 析 JavaScript 代码 部 分 。 


//Get all the keys from document 

var keys = document.querySelectorAll ('#calculator span"); 
Var operators = ["+", "="; 'x', "H 

var decimalAdded - false; 


上 面 的 代码 段 将 HTML 元 素 中 的 calculator id 下 的 所 有 span 元 素 获 取 到 keys 变量 中 ， 
即 页 面 上 所 有 的 按键 。 之 后 将 “+、-、x、+* 上 ”四则 运算 的 操作 放 入 到 operators 变量 中 ， 使 
用 一 个 decimalAdded 变量 追踪 小 数 点 状态 。 


input .innerHTML 


代码 中 的 该 变量 为 结果 显示 框 ， 当 每 次 操作 界面 需要 改变 显示 值 时 ， 会 改变 这 个 变量 
的 值 。 当 然 需要 获取 当前 变量 值 时 也 会 从 inputinnerHIML 中 得 到 变量 的 值 。 
接 下 来 着 重 分 析 一 下 单 击 等 于 号 时 触发 的 事件 。 


//If eval key is pressed, calculate and display the result 
else if (btnVal f=") (4 
var equation = inputVal; 


var lastChar 


equation[equation.length - 1]; 


//Replace all instances of x and - with * and / respectively. This can 


/ /be done easily using regex and the 'g' tag which will replace all instances 
//of the matched character/substring 
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equation = equation.replace(/x/g, '*').replace(/+/g, '/"'); 


//Final thing left to do is checking the last character of the equation. 
//If it's an operator or a decimal, remove it 
if(operators.indexOf(lastChar) > -1 || lastChar == '.') 


equation - equation.replace(/.$/, ''); 


if (equation) 
input.innerHTML = eval (equation); 


decimalAdded - false; 
} 


fil CAEP SAL EI, SHAW x” Al “=” A JavaScript 中 可 以 进 
行 运算 的 “*” 和 “/” 这 里 使 用 的 是 replace 方法 同时 传 入 正则 表达 式 ， 将 字符 串 中 所 有 
的 该 符号 同 义 替换 。 当 所 有 的 用 户 输入 搜集 完 后 ， 将 最 后 的 非法 字符 ， 例 如 多 余 的 四 则 运 
算 符 号 和 小 数 点 号 删除 ， 最 后 将 整合 的 操作 通过 eval 方法 进行 计算 ， 再 将 结果 传 入 到 
inputinnerHTML 中 ， 显 示 出 最 终 的 运算 结果 。 


1， 分 析 俄罗斯 方块 实例 代码 21-1 和 计算 器 实例 代码 21-2， 它 们 都 使 用 了 哪些 JavaScript 
技术 ? 
2， 分 析 计算 器 实例 代码 21-2， 分 析 其 CSS 如 何 控制 页 面 显示 的 ? 


本 部 分 小 结 


1. 什么 是 JavaScript 
JavaScript 是 一 种 动态 的 计算 机 编程 语言 。 它 是 轻 量 级 的 ， 最 常用 作 网 页 的 一 部 分 ， 用 
实现 客户 端 脚本 与 用 户 交 互 并 泻 染 动 态 页 面 。 它 是 一 种 具有 面向 对 象 功能 的 解释 性 编程 
JavaScript 首先 被 称 为 LiveScript, 但 Netscape 将 其 名 称 更 改 为 JavaScript, 这 可 能 是 因 
为 当时 Java 语言 风靡 一 时 。1995 年 ，JavaScript 首次 在 Netscape 2.0 中 出 现 ， 名 称 为 
LiveScript。 语 言 的 通用 核心 已 经 嵌入 在 Netscape, Internet Explorer 和 其 他 网 络 浏览 器 中 。 
ECMA-262 规范 定义 了 核心 JavaScript 语言 的 标准 版 本 。 
。 JavaScript 是 一 种 轻 量 级 的 解释 型 编程 语言 。 
。 专门 为 创建 以 网 络 为 中 心 的 应 用 程序 而 设计 。 
。 与 Java 的 补充 和 集成 。 
* 与 HIML 互补 和 集成 。 
。 开放 和 跨 平 台 。 
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2. 客户 端 JavaScript 

客户 端 JavaScript 是 最 常见 的 语言 形式 。JavaScript 脚本 应 包含 在 HTML 文档 中 或 
HTML 文档 引用 ， 以 供 浏 览 器 解释 。 

这 意味 着 网 页 不 需要 是 静态 HTML， 可 以 包括 与 用 户 交 互 的 程序 ， 控 制 浏览 器 ， 以 及 
动态 创建 的 HTML 内 容 。 

JavaScript 客户 端 机 制 相 比 于 传统 的 CGI 服务 器 端 脚本 ， 提 供 了 许多 优点 。 例 如 : 可 
以 使 用 JavaScript 来 检查 用 户 是 否 在 表单 字段 中 输入 了 有 效 的 电子 邮件 地 址 。 

JavaScript 代码 在 用 户 提交 表单 时 执行 ,只 有 所 有 条 目 都 有 效 时 , 才 会 将 其 提交 给 Web 
服务 器 。 

JavaScript 可 用 于 捕获 用 户 启动 的 事件 , 例如 按钮 单 击 、 链接 导航 和 用 户 显 式 或 隐 式 启 
动 的 其 他 操作 。 

3. JavaScript 的 优点 

(1) 较 少 的 服务 器 交互 :可 以 在 将 页 面 关 闭 到 服务 器 之 前 验证 用 户 输入 。 这 样 可 以 节 
省 服务 器 流量 ， 也 意味 着 更 少 的 服务 器 负载 。 

(2) 立即 反馈 给 访问 者 : 他 们 不 必 等 待 页 面 重 新 加 载 。 

(3) 增加 交互 性 : 当 用 户 用 鼠标 葵 停 在 其 上 或 通过 键盘 激活 它们 时 ， 可 以 创建 响应 的 
界面 。 

(4) 更 丰富 的 界面 : 可 以 使 用 JavaScript 来 构建 功能 强大 的 组 件 ， 例 如 拖 放 组 件 和 滑 
块 等 ， 为 网 站 访问 者 提供 丰富 的 界面 。 

4. JavaScript 的 限制 

不 能 将 JavaScript 视 为 完整 的 编程 语言 。 它 缺乏 以 下 重要 特征 。 

。 客户 端 JavaScript 不 允许 读 取 或 写 入 文件 ， 这 是 为 了 安全 原因 而 保存 。 

* JavaScript 不 能 用 于 网 络 应 用 程序 ， 因 为 没有 这 样 的 支持 可 用 。 

* JavaScript 没有 任何 多 线程 或 多 处 理 器 功能 。 

再 次 强调 ，JavaScript 是 一 种 轻 量 级 的 解释 型 编程 语言 ，JavaScript 可 让 静态 HTML 页 
面具 备 强 大 的 交互 功能 。 

5. JavaScript 开发 工具 

JavaScript 的 主要 优点 之 一 是 它 不 需要 昂贵 的 开发 工具 。 可 以 从 简单 的 文本 编辑 器 (如 
记事 本 ) 开始 。 由 于 它 是 Web 浏览 器 上 下 文中 的 解释 语言 ， 所 以 甚至 不 需要 购买 编译 器 。 

6. 今天 的 JavaScript 在 哪里 

ECMAScript Edition 5 标准 将 是 四 年 来 的 首次 更 新 。 JavaScript 2.0 符合 ECMAScript 
标准 的 第 5 版 ， 两 者 之 间 的 区 别 是 非常 小 的 。JavaScript 2.0 的 规范 可 以 在 以 下 站 点 找到 : 
http://www.ecmascript.org/. 

SR, Netscape 的 JavaScript 和 Microsoft 的 JScript 符合 ECMAScript 标准 ， 尽 管 这 两 
种 语言 仍然 支持 不 属于 标准 的 功能 。 
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第 五 部 分 综合 样 例 


接 下 来 通过 三 个 综合 样 例 来 进一步 说 明 HTML. CSS. JavaScript 的 使 用 。 
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第 22 章 管理 系统 





接 下 来 通过 编写 一 个 简单 的 教务 管理 系统 来 展示 HTML, CSS, JavaScript 的 开发 能 力 。 
教务 管理 系统 界面 如 图 22-1 所 示 。 
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图 22-1 教务 管理 系统 界面 


224 类 库 准 备 


首先 分 析 一 个 管理 系统 最 重要 的 是 显示 表格 内 容 ， 为 了 支持 更 为 优雅 的 表格 显示 ， 使 
用 BootStrap Table. BootStrap Table 相关 使 用 可 以 参考 官网 http://bootstrap-table.wenzhixin. 
net.cn/zh-cn/getting-started/ 。 

此 次 编写 会 使 用 jQuery、BootStrap、BootStrap Table 这 三 个 类 库 。 其 中 jQuery 是 Google 
公司 提供 的 JavaScript 第 三 方 库 ，BootStrap 是 最 为 著名 的 第 三 方 CSS 库 ， 需 要 配合 jQuery 
使 用 ，BootStrap Table 则 是 在 jQuery 和 BootStrap 基础 上 编写 的 适合 表格 应 用 开发 的 第 三 
方 库 。 
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主页 效果 见 图 22-2。 
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图 22-2 主页 效果 


相关 代码 展示 如 代码 22-1 所 示 。 
代码 22-1 


<!DOCTYPE html» 
<html lang-"en" class="no-js"> 


<head> 


«meta charset-"utf-8"» 

«title»Administrative System</title> 

«meta name-"viewport" content-"width-device-width, initial-scale-1.0"» 
«meta name-"description" content=""> 


«meta name-"author" content=""> 


<!-- CSS --> 

<link rel-'stylesheet' href-'http://fonts.googleapis.com/css? 
family=PT+Sans:400,700'> 

<link rel="stylesheet" href="assets/css/reset.css"> 

<link rel="stylesheet" href="assets/css/supersized.css"> 
<link rel="stylesheet" href="assets/css/style.css"> 


<!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 

<!--[if ìt IE 9]> 
<script src-"http://html5shim.googlecode.com/svn/trunk/html5.js"» 
</script> 

«![endif]--» 
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</head> 
<body> 


<div class="page-container"> 

<h1> 登 录 </h1> 

«form action-"" method="post"> 

«input type-"text" name-"username" class-"username" 

"用 户 名 "> 
<input type="password" name="password" class="password" 
placeholder=" 密 码 "> 
<a href="switchPage .html"><button type="submit"> 登 录 
</button></a> 





placeholder 


<div class="error"><span>+</span></div> 
</form> 


<!-- JavaScript --> 

<script src="js/jquery-1.11.3.min.js"></script> 

<script src="assets/js/supersized.3.2.7.min.js"></script> 
<script src="assets/js/supersized-init.js"></script> 
<script src="assets/js/scripts.js"></script> 


</body> 
</html> 
这 里 使 用 了 一 个 模板 主题 , 可 以 通过 设置 assets/js 下 面 的 supersized-init 文件 可 以 指定 
页 面 的 切换 效果 。 


jQuery (function ($) { 


$. supersized ({ 


//Functionality 

slide interval : 4000, //Length between transitions 

transition 3 Dy //0-None, 1-Fade, 2-Slide Top, 3-Slide 
//Right, 4-Slide Bottom, 5-Slide Left, 
//6-Carousel Right, 7-Carousel Left 

transition speed  : 1000, //Speed of transition 

performance : 1, //0-Normal, 1-Hybrid speed/quality, 


//2-Optimizes image quality, 3-Optimizes 
//transition speed(Only works for 
//Firefox/IE, not Webkit) 


//Size & Position 


min_width : 0, //Min width allowed (in pixels) 
min height : 0, //Min height allowed (in pixels) 
vertical center : 1, //Vertically center background 
horizontal center : 1, //Horizontally center background 
fit always : 0, //Image will never exceed browser width or 
//height (Ignores min. dimensions) 
fit portrait : 1, //Portrait images will not exceed browser height 
fit landscape : 0, //Landscape images will not exceed browser width 
//Components 
slide links : 'blank', //Individual links for each slide 
// (Options: false, 'num', 'name', 'blank') 
slides eT //Slideshow Images 


{image : 'assets/img/backgrounds/1.jpg'}, 
(image : 'assets/img/backgrounds/2.jpg'}, 
(image : 'assets/img/backgrounds/3.jpg') 


); 
通过 设置 slides 内 部 的 json 数据 包含 的 路 径 来 控制 使 用 那 几 张 图 片 作为 随机 背景 。 


22.3 ”数据 展示 页 面 


管理 系统 的 数据 展示 页 面 如 图 22-3 所 示 。 
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管理 系统 的 数据 展示 页 面 的 代码 如 代码 22-2 所 示 。 
代码 22-2 


<!DOCTYPE html» 

<html lang="en"> 

<head> 

«meta charset-"UTF-8"» 

«meta http-equiv-"X-UA-Compatible" content-" 





E=edge"> 


«meta name-"viewport" content-"width-device-width, initial-scale-1"» 


<title>LGC Administrator</title> 

<!-- Bootstrap --> 

<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" hre 
<link rel="stylesheet" href 
</head> 

<body> 

<div class="container-fluid"> 







<form class-"navbar-form navbar-right"> 
<time></time> 
<labe1>xkill</label> 
<a>OYZH</a> 
</form> 
<!-- /.container-fluid --> 
</div> 


<div class-"OYZHDiv"» 
<img src="images/bgTop. jpg"> 
</div> 


<div class="container"> 
<hl>Bootstrap Table Examples«/hl» 
«div id-"toolbar"» 


<button id-"addBtn" class="btn btn-default"><i 


glyphicon-plus"></i> 添加 </button> 
</div> 
<table 
id="table" 
data-show-export-"true" 
data-click-to-select-"true" 
data-toggle-"table" 
data-height-"600" 
data-toolbar="#toolbar" 
data-pagination-"true" 
data-url-"data/datal.json" 
data-search-"true" 


"css/bootstrap-table.css"> 
"css/customizedStyle.css"> 


class="glyphicon 


data-id-table-"advancedTable" 
data-advanced-search-"true" 
data-page-list-"[10, 25, 50, 100, ALL]" 



















> 
<thead> 
<tr> 
«th data-field-"state" data-checkbox-"true"»«/th» 
«th data-field-"id" data-align="right"> 单 号 </th> 
<th data-field="department" data-align="" > 部 门 </th> <!--data- 
editable="true"--> 
«th data-field-"date" data-align=""> 日 期 </th> 
«th data-field-"chargeMan" data-alig > 负责 人 </th> 
«th data-field-"checkMan" data-align=""> 审 核 人 </th> 
«th data-field-"transactionMan" data-align=""> 经 手 人 </th> 
«th data-field-"transfer" data-align=""> 转 账 </th> 
<th data-field="bill" data-align=""> 支 票 </th> 
<th data-field="internetBank" data-align=""> 网 银 </th> 
<th data-field="card" data-align=""> 公 务 卡 </th> 
«th data-field-"affairl" data-align=""> 用 途 1</th> 
«th data-field-"affair2" data-align=""> 用 途 2</th> 
«th data-field-"affair3" data-align=""> 用 途 3</th> 
</tr> 
</thead> 
</table> 
</div> 


<div class-"OYZHDiv"» 
<div style="position: relative"></div> 
<img src-"images/bg-Bottom.png"»«/img» 
</div> 
«footer class-"text-center"» 
<div class="container"> 
<div class="row"> 
<div class-"col-xs-12"» 
<p>Copyright © HTML/CSS/JS Tutorial. All rights reserved.</p> 


</div> 
</div> 
</div> 

</footer> 

«!-- / FOOTER ==> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --» 

<script src="js/jquery-1.11.3.min.js"></script> 

<script src="js/bootstrap-table.js"></script> 第 
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<script src-"js/bootstrap-table-export.js"»«/script» 
<script src-"js/bootstrap-table-toolbar.js"»«/script» 
<script src="js/bootstrap-table-zh-CN.min.js"></script> 
<script src="js/tableExport .js"></script> 


<!-- Include all compiled plugins (below), or include individual files as 
needed --» 

<script src="js/bootstrap.js"></script> 

«script src-"js/customizedJS.js"»«/script» 

<script src="js/inputWindow.js"></script> 

</body> 

</html> 


上 面 代码 中 值得 注意 的 是 ， 定 义 BootStrap Table 属性 的 代码 段 。 


<table id="table" data-show-export="true" data-click-to-select="true" 

data-toggle="table" data-height="600" data-toolbar="#toolbar" 
data-pagination="true" data-url="data/datal.json" data-search="true" 
data-id-table-"advancedTable" data-advanced-search-"true" 
data-page-list-"[10, 25, 50, 100, ALL]"> 


当 在 script 中 包含 了 BootStrap Table 的 js 文件 以 及 在 CSS 中 引用 了 BootStrap Table 的 
CSS 文件 后 。 


<link rel="stylesheet" href="css/bootstrap-table.css"> 


«script src-"js/bootstrap-table.js"»«/script» 


id="table" 的 元 素 就 会 被 主动 地 修改 成 BootStrap Table 的 样式 ， 例 如 : 在 table 标签 中 
指定 data-show-export="true"， 则 代表 显示 导出 数据 的 功能 ， 会 显示 出 下 面 的 控件 支持 数据 
导出 为 TXT、CSYV 等 文件 格式 。data-show-export 的 界面 如 图 22-4 所 示 。 
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再 例如 data-url 可 以 指定 table 的 数据 来 源 ，data-url="data/datal.json" 字 段 表 示 表 格 数 
据 的 来 源 为 相对 网 页 文件 为 data/datal.json 路 径 下 的 json 文件 。 打开 data/datal json 文件 可 
以 看 到 这 样 的 数据 内 容 。 


[ 


hy 


"ia":0, 

"department": "J2", 
"date":"2017/17/1", 
"chargeMan":" 小 明 "， 
"checkMan":" 小 红 "， 
"transactionMan":" 小 刚 "， 
"transfer":" 转 账 "， 
"pill":"xXi", 
"internetBank": "Mi", 
"card":" 公 务 卡 "， 
"affair": "Fixe", 
"affair2":"Jjx&—", 
"affair3":"HB&-" 


"id":1, 

"department" :" HZ", 
"date":"2017/1/1", 
"chargeMan" : "Bj", 
"checkMan" : "/| Zr" 
"transactionMan" 
"transfer":" 转 账 "， 
"Dill "支票"， 
"internetBank":" 网 银 "， 
"card":" 公 务 卡 "， 
"affairl":" 用 途 一 "， 
"affair2":"Hj&—", 
"affair3":"Hb&-" 








"小 刚 "， 





"id", 
"name": "test2", 


"price": "$2" 


"ighi 3, 
"name": "test3", 


"price": "$3" 
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} ， 





), 


ages d 


"name": "test4", 
"price": "$4" 
"igni 5, 

"name": "test5", 
"price": "$5" 
"igit: 6, 

"name "teste", 





"price": "$6" 


wk Ty 
"name": "test7", 


"price": "$7" 


nid" B, 
"name": "test8", 


"price": "$8" 


niim. o8, 
"name": "test9", 


"price": "$9" 


"ia": 


"name": 


10, 
"testlO", 


"price": "$10" 


"id": 


"name": 


11, 
"testi1", 


"price": "$11" 


"gei $2, 
"testi2^, 


"$12" 


"name": 


"price": 


"ig" 13, 
"name": "test13", 


"price"; "$13" 








) 

t 
"id": 14, 
"name": "testil4", 
"price": "$14" 

ty 
Mids qe. 
"name": "test15", 
"price": "$15" 

r 
"ig" 36, 
"name": "testl6", 
"price": "$16" 

r 
"id": 37, 
"name": "testl7", 
"price"; "$17" 

]} ， 

{ 
nig". i8; 
"name": "testi8", 
"price": "$18" 

hy 

{ 
"id": 39. 
"name": "test19", 
"price"; "$19" 

ty 

{ 
Pia: 20. 
"name": "test20", 
"price": "$20" 

} 


] 

以 上 的 数据 是 标准 的 json 数据 ， 即 一 种 键 值 对 的 数据 结构 ， 可 以 方便 地 显示 与 这 类 的 
键 值 对 相关 的 数据 。 

另外 一 个 值得 注意 的 是 右上 角 的 时 间 显 示 控 件 , 这 里 编写 了 一 个 十 分 简单 的 JavaScript | 22 
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代码 来 实现 时 间 的 显示 , 主要 利用 到 了 JavaScript 自 带 的 Date() 方 法 。 查 看 js/customizedJs.js 
文件 ， 可 以 发 现 里 面 的 这 段 代码 。 


$ (function () { 
setInterval (function () { 
$("time") .text (new Date().toLocaleString()); 
}, 1000); 
}); 


通过 使 用 jQuery 选择 器 $ 选 择 页 面 上 的 time 元 素 ， 再 通过 text0 方 法 设置 其 内 部 的 
HTML 文字 为 当前 时 间 ; 当前 时 间 通过 Date0.toLocalString0) 将 时 间 转 换 为 一 个 String 变量 
来 完成 显示 ,神奇 的 是 Date0.toLocalString0 会 根据 当前 浏览 器 语言 设置 自动 翻译 时 间 ， 十 
分 方便 。 时 间 显示 界面 如 图 22-5 所 示 。 


ese: n loj JUeersimac Desktop Pi TM 
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图 22-5 时 间 显 示 界 面 
接 下 来 通过 另 一 个 页 面 进一步 的 了 解 BootStrap Table 在 开发 管理 系统 时 的 使 用 。 


22.4 用 户 管理 页 面 


用 户 管理 界面 如 图 22-6 所 示 。 

使 用 框架 的 最 大 好 处 就 是 可 以 快速 搭建 类 似 的 网 页 。 例 如 使 用 BootStrap Table 可 以 快 
速 地 建立 表格 页 面 。 用 户 管理 也 可 以 同 数据 管理 一 样 使 用 表格 的 形式 展现 出 来 。 用 户 管理 
界面 代码 见 代 码 22-3. 
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图 22-6 用 户 管理 界面 


代码 22-3 


<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
«meta name-"viewport" content-"width-device-width, initial-scale-1"» 
<title>LGC Administrator</title> 
«!-- Bootstrap --> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/bootstrap-table.css"> 
<link rel="stylesheet" href-"css/customizedStyle.css"» 
</head> 


<body> 
<div class="container-fluid"> 


<form class="navbar-form navbar-right"> 


<time></time> 
<label> 欢 迎 </label> 
<a>OYZH</a> 
</form> 
</div> 第 
«div class="OYZHDiv"> »" 
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<img src="images/bgTop.jpg"> 
</div> 


<div class="container"> 
<hl>Bootstrap Table Examples</hl> 
<div id="toolbar"> 
<button id="deleteBtn" class="btn btn-danger"> 
<i class="glyphicon glyphicon-remove"></i> 删除 
</button> 
<button id="addBtn" class="btn btn-default"><i class="glyphicon 
glyphicon-plus"></i> 添加 </button> 
</div> 


<table id-"table" data-show-export-"true" data-click-to-select-"true" 

data-toggle-"table" data-height-"600" data-toolbar="#toolbar" 
data-pagination-"true" data-url-"data/userData.json" data-search- 
"true" data-id-table-"advancedTable" data-advanced-search-"true" 
data-page-list-"[10, 25, 50, 100, ALL]"> 


«thead» 
«tr» 
«th data-field-"state" data-checkbox-"true"»«/th» 
«th data-field-"id" data-align=""> 姓 名 </th> 
<th data-field="userName" data-align=""> 用 户 名 </th> 
<!--data-editable="true"--> 
«th data-field-"limit" data-align=""> 权 限 </th> 
</tr> 
</thead> 
</table> 
</div> 


<div class-"OYZHDiv"» 
<div style="position: relative"></div> 
<img src-"images/bg-Bottom.png"»«/img» 
</div> 
<footer class="text-center"> 
<div class="container"> 
<div class="row"> 
<div class="col-xs-12"> 
<p>Copyright © HTML/CSS/JS Tutorial. All rights reserved.</p> 
</div> 


</div> 
</div> 
</footer> 


<!-- / FOOTER --> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-1.11.3.min.js"></script> 

<script src-"js/bootstrap-table.js"»«/script» 


<script src-"js/bootstrap-table-export.js"»«/script» 
<script src="js/bootstrap-table-toolbar.js"></script> 
<script src-"js/bootstrap-table-zh-CN.min.js"»«/script» 
<script src="js/tableExport.js"></script> 


<!-- Include all compiled plugins (below), or include individual files as 
needed --> 
<script src="js/bootstrap.js"></script> 
«script src-"js/customizedJS.js"»«/script» 
«script src-"js/inputWindow.js"»«/script» 
</body> 


</html> 
注意 其 中 表格 定义 语句 。 


<table id="table" data-show-export="true" data-click-to-select="true" 

data-toggle-"table" data-height-"600" data-toolbar="#toolbar" 
data-pagination-"true" data-url-"data/userData.json" data-search-"true" 
data-id-table-"advancedTable" data-advanced-search-"true" 
data-page-list-"[10, 25, 50, 100, ALL]"> 


<thead> 
<tr> 
«th data-field-"state" data-checkbox-"true"»«/th» 
«th data-field-"id" data-align=""> 姓 名 </th> 
<th data-field="userName" data-align=""> 用 户 名 </th> 
«1--data-editable-"true"--» 
«th data-field-"limit" data-align=""> 权 限 </th> 
</tr> 
</thead> 
</table> 


只 需要 在 table 的 头 标签 中 定义 需要 的 控件 ， 然 后 填写 好 对 应 的 表格 头 信息 (data-field)， 


就 能 够 快速 的 构建 表格 。 
(1) 添加 用 户 





添加 用 户 过 程 即 添 加 用 户 界 面 和 添加 用 户 效果 界面 如 图 22-7、 图 22-8 所 示 。 第 
22 
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图 22-7 添加 用 户 界 面 
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图 22-8 ”添加 用 户 效果 界面 











(2) 搜索 用 户 
搜索 用 户 界面 如 图 22-9 所 示 。 
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图 22-9 ”搜索 用 户 界面 


(3) 数据 导出 
数据 导出 功能 效果 如 图 22-10 所 示 。 
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图 22-10 数据 导出 功能 效果 





更 多 关于 BootStrap Table 的 信息 可 以 参阅 其 官网 : http://bootstrap-table.wenzhixin.net.cn。 
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1. 查看 了 解 BootStrap-Table 在 Github 上 的 源码 。 
2. 分 析 工 程 中 管理 系统 另外 几 个 页 面 的 源码 ， 观 察 这 些 网 页 运用 了 什么 共同 的 
HTML, CSS, JavaScript 技术 。 





#238 游戏 2048 





23.1 Wi 面 


接 下 来 提供 一 个 2048 游戏 的 JavaScript 实现 ， 同 时 提供 少量 HIML 和 CSS 代码 显示 
界面 。2048 小 游戏 界面 如 图 23-1 所 示 。 








分 数 : 20 














图 23-1 2048 小 游戏 界面 


23.2 代 码 


23.2.1 HTML 


<html> 


<head> 
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«meta charset-"utf-8"» 

«title»2048 小 游戏 </title> 

<link href-"2048.css" media-"all" rel="stylesheet" /> 
</head> 


<body> 
<h3 id="score"> 分 数 : 0</h3> 
<div class="g2048"> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 
</div> 
<script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js"> 
</script> 
<script src="2048.js"></script> 
</body> 
</html> 


在 HTML 中 主要 使 用 div 标签 画 出 了 2048 游戏 所 需要 的 4x4 的 方 格 界面 ， 同 时 提供 
-个 分 数 显示 框 。 


23.2.2 CSS 


box-sizing: border-box; 
} 
h3{ 
text-align:center; 
} 
.g2048{ 
border: 4px solid #bbad9e; 
width: 500px; 


height: 500px; 
Margin: 30px auto; 
position: relative; 
} 
.cell{ 
float: left; 
height: 25%; 
width: 25$; 
box-sizing:border-box; 
border: 4px solid #bbad9e; 
} 
.number cell( 
position: absolute; 
box-sizing:border-box; 
width: 25$; 
height: 25$; 
padding: 4px; 
left: 0; 
top: 0; 
transition: all 0.2s; 
color: #f£ff; 
font-size: 20px; 
} 
.number cell con( 
width: 100%; 
height: 100$; 
text-align: center; 
position: relative; 
} 
.number cell con span{ 
position: absolute; 
top: 50$; 
margin-top: -0.5em; 
left: 0; 
right: 0; 
} 
/* 位 置 */ 
-pO0(1eft:0;top:0;) .pOl(left:0; top:25%;} .p02{left:0; top:50%;} 
.p03{left:0; top:75%;} .pl0{left:25%; top:0;} .pll{left:25%; top:25%;} 
.pl2{left:25%; top:50%;} .pl3{left:25%; top:75%;} .p20{left:50%; top:0;} 
-p21(left:50$; top:25%;} .p22{left:50%; top:50%;} .p23{left:50%; top:75%;} 
-p30{left:75%; top:0;} .p3l{left:75%; top:25$;) .p32{left:75%; top:50%;} 
.p33{left:75%; top:75%;} 
/* 颜 色 */ 


-n2(background: #eee4da; color: #000;} .n4{background: #ece0c8; color: 
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#000;} .n8{background:#f£3b179;} .nl6(background:$f59563;) .n32{backg 

round: #f£67c5f;} .n64{background: #f65e3c;} .n128{background: #edce71; } 

-n256{background: #eccb61;} .n512{background: #edc750;} .n1024(backgrou 
nd: #edc631;} .n2048{background:#edcl2f; } 


CSS 定义 了 游戏 中 界面 元 素 的 样式 ， 例 如 : 


.g2048( 
border: 4px solid #bbad9e; 
width: 500px; 
height: 500px; 
margin: 30px auto; 
position: relative; 

} 


这 段 代码 说 明 g2048 类 的 元 素 〈 即 HTML 中 的 <div class="g2048"> )， 应 当 显 示 为 4px 
的 颜色 为 #bbad9e 的 描 边 ; 控件 宽度 和 高 度 为 500px; 上 外 边 距 和 下 外 边 距 是 30px; 右 外 
边 距 和 左 外 边 距 则 根据 页 面 缩放 状态 自动 计算 ， 控件 的 位 置 是 相对 的 ， 因 而 可 以 适应 不 同 
的 页 面 缩放 (一 直 翘 浮 在 页 面 中 央 )。 


23.2.3 JavaScript 


下 面 代码 23-1 提供 了 2048 的 JavaScript 源码 。 
代码 23-1 


function G2048(){ 
this.addEvent (); 


G2048.prototype = { 
constructor:G2048, 
init:function () { 

this.score = 0; 
this.arr = []; 
this.moveAble = false; 
$("#score") .html (" 分 数 : 0"); 
$(".number cell").remove(); 
this.creatArr(); 
) 
creatArr:function()( 
/* 生 成 原始 数组 , 随机 创建 前 两 个 格子 */ 
var ijj; 
for (i = 0; i < 4; i++) { 
this.arr[1] = (1; 
for (j-0; j < 4; j++) { 
this.arr[i][j] = {}; 


this.arr[i][j]-.value = 0; 


} 
// 随 机 生成 前 两 个 。 并 且 不 重复 
var 31,532,341, 3127 
do{ 
il=getRandom (3) ,i2=getRandom (3) , }1=getRandom (3) , }2=getRandom (3) ; 
)while(il--i2 && jl == j2); 


this.arrValueUpdate (2,i1,j1); 
this.arrValueUpdate (2,i2,j2); 
this.drawCell(i1,j1); 
this.drawCell(i2,j2); 
), 
drawCell:function (i,j) { 
/* 画 一 个 新 格子 */ 
var item = '«div class-"number cell p'+i+j+'" ><div class-"number 
cell con n2"><span>' 
+this.arr[i] [j] .value+'</span></div> </div>'; 
$(".g2048") .append (item); 
) 
addEvent : function () { 
// 添 加 事件 
var that = this; 
document . onkeydown=function (event) { 
window.event || arguments.callee.caller. 


var e = event || 


arguments [0]; 


var direction = 


var keyCode = 


that.direction; 
e.keyCode; 


switch (keyCode) { 


case 39: // 右 

that.moveAble = false; 

that .moveRight (); 

that .checkLose (); 

break; 

case 40: ITF 

that.moveAble = false; 

that .moveDown () ; 

that .checkLose (); 

break; 

case 37: // 左 

that.moveAble = false; 

that .moveLeft () 7 第 

that .checkLose () 23 
章 


FR 2048 


HIML5+CSS3+JavaScript P] z€zH AAA 





break; 

case 38:// 上 
that.moveAble = false; 
that .moveUp (); 

that .checkLose (); 
break; 


ie 
}, 
arrValueUpdate: function (num, i,j) { 
/* 更 新 一 个 数组 的 值 */ 
this.arr[i] [j].oldValue = this.arr[i] [j].value; 
this.arr[il[j].value = num; 
) 
newCell:function()t 
/* 在 空白 处 掉 下 来 一 个 新 的 格子 */ 
var i,j,len, index; 
var ableArr = []; 
if (this.moveAble != true) { 
console.log (' 不 能 增加 新 格子 ， 请 尝试 其 他 方向 移动 ! 1); 
return; 
} 
for (i = 0; i < 4; i++) { 
for (j = 0; j < 4; j++) t 
if(this.arr[i][j].value == 0) { 
ableArr.push([i,j])7 


} 

len = ableArr.length; 

if (len > 0){ 
index = getRandom(len); 
i = ableArr [index] [0]; 
j = ableArr [index] [1]; 
this.arrValueUpdate (2, i,j); 
this.drawCell (i,j); 

}else{ 
console.log (‘AAMT ! '); 


return; 


}, 
moveDown: function () { 


/* 向 下 移动 */ 


var 1,j,k,n; 


for (i = 07 i < 4; irt) 1 
n= 3; 
for (j = 3; j >= 0; j--) { 
if (this.arr[i] [j] .value==0) { 


continue; 


k = j+l; 
aa: 
while (k<=n) { 
if (this.arr[i] [k].value == 0){ 


if(k ==n || (this.arr[i] [k+1].value!=0 && this.arr[i] 


[k+1] .value!=this.arr[i] [j] . value) ) { 


this.moveCell(i,j,i,k); 
) 


k++; 
}else{ 
if(this.arr[i][k].value == this.arr[i][j].value){ 
this.mergeCells(i,j,i,k); 
n--; 
) 
break aa; 


) 
this .newCel1() ;// 生 成 一 个 新 格子 ， 后 面 要 对 其 做 判断 


), 
moveUp: function () { 
/* 向 上 移动 */ 
var i,j,k,n; 
for (i = 0; i < 4; i++) { 
n=0; 
for (j = 0; j < 4; j++) (t 
if (this.arr[i] [j] .value==0) { 


continue; 
} 
k = j-1; 
aa: 
while (k>=n) { 
if(this.arr[i][k].value == 0){ 
if(k ==n || (this.arr[il[k-1].value!-0 && 


this.arr[i] 
this.moveCell(i,j,i,k); 


[k-1].value!-this.arr[i][j].value))( 
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k--; 


yelse{ 
if (this.arr[i] [k].value == this.arr[i] [j].value) { 


this.mergeCells(i,j,i,k); 
net; 

} 

break aa; 


) 
this.newCell() ;// 生 成 一 个 新 格子 ， 后 面 要 对 其 做 判断 


}, 
moveLeft:function (){ 


/* 向 左 移动 */ 


var i,j,k,n; 


for (j = 0; j < 4; j++) { 
n=0; 
for (i = 0; i < 4; i++) { 
if (this.arr[i] [j] .value==0) { 
continue; 
} 
k=i-1; 
aa: 
while (k>=n) { 
if(this.arr[k][jl.value == 0){ 
if(k == n || (this.arr[k-1][jl.value!-0 && 
this.arr[k-1][j].value!-this.arr[i][j].value))( 
this.moveCell(i,j,k,j); 


k--; 
jelse{ 
if(this.arr[k][j].value == this.arr[i][j].value)( 
this.mergeCells(i,j,k,j); 
ntt; 
} 
break aa; 


this.newCell () ;// 生 成 一 个 新 格子 ， 后 面 要 对 其 做 判断 
) 
moveRight: function () { 
/* 向 右 移动 */ 
var i,j,k,ni 
for (j = 07 j < 4; j++) i 
3; 
for (i = 3; i >= 0; i--) { 
if (this.arr[i] [j] .value==0) { 
continue; 


n 


aa: 
while (k<=n) { 
if (this.arr[k][j].value == 0) { 


if(k == n || (this.arr[k+1][j]-.value!=0 && 


this.arr[k+1] [j].value!=this.arr[i] [j].value) ) { 


this.moveCell(i,j,k,j); 
} 
k++; 


}else{ 


if (this.arr[k][j].value == this.arr[i][j].value){ 


this.mergeCells(i,j,k,j); 
n--; 

} 

break aa; 


this.newCell () ;// 生 成 一 个 新 格子 ， 后 面 要 对 其 做 判断 
) 
mergeCells:function(il,j1,i2,j2)( 
/* 移 动 并 合并 格子 */ 
var temp = this.arr[i2][j2].value; 
Var templ = temp * 2; 
this.moveAble = true; 
this.arr[i2][j2].value = templ; 
this.arr[il][j1].value = 0; 
$(".p"+i2+j2) .addClass ('toRemove'); 


var theDom = $(".p"+il+j1) .removeClass ("p"+il+j1) .addClass ("p"+i2+ 


j2).find('.number cell con'); 


setTimeout (function () { 
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$ (" .toRemove") . remove () ;// 这 个 写法 不 太 好 
theDom. addClass ('n'+templ) .removeClass('n'+temp) .find('span') 
-html (temp1) ; 
),200) ;//200 毫秒 是 移动 耗 时 。 
this.score += templ; 
$("#score") .html (" 分 数 : "+this.score) ; 
if(templ == 2048) { 
alert ("you win!'); 
this.init(); 


}, 

moveCell:function(il,j1,i2,j2) { 
/* 移 动 格子 */ 
this.arr[i2] [j2] .value 
this.arr[il][j1].value = 0; 


this.arr[il] [j1].value; 


this.moveAble - true; 
$(".p"-il*jl).removeClass ("p"+il+j1l) .addClass ("p"+i2+j2); 
hy 
checkLose: function () { 
/* 判 输 */ 
var i,j,temp; 
for (i = 0; i < 4; i++) { 
for (j = 0; j < 4; j++) { 
temp = this.arr[i] [j].value; 
if(temp == 0){ 
return false; 
} 
if (this.arr[i+1] && (this.arr[i+1] [j] .value==temp) ) { 
return false; 
} 
if ((this.arr[i] [j+1]!=undefined) && (this.arr[i] [j+1] 
-Value--temp))( 
return false; 


) 
alert('you 1ose!'); 
this.init(); 


return true; 


// 生 成 随机 正 整数 O~n 之 间 
function getRandom(n) { 
return Math. floor (Math. random () *n) 


} 


var g = new G2048(); 
g-init(); 


JavaScript 在 这 里 主要 实现 了 下 面 九 个 功能 。 

COD 初始 化 的 时 候 随 机 生成 两 个 为 2 的 格子 。 注 意 处 理 掉 两 个 格子 生成 到 一 个 格子 上 
的 现象 。 

(2) 方块 的 移动 和 合并 ， 方 块 移动 的 动画 。 根 据 移动 后 的 值 ， 改 变 方块 的 颜色 。 注 意 
操作 的 顺序 。 颜 色 主 要 是 添加 和 移 除 2 一 2048 所 代表 的 颜色 的 class。 位 置 也 添加 和 移 除 对 
应 位 置 所 代表 的 类 。 动 画 则 是 用 CSS3 进行 的 过 渡 。 

(3) 判断 某 个 方向 上 不 能 移动 ， 不 能 出 现 新 的 格子 。 

(4) 随机 在 空白 处 出 现下 一 块 。 

(5) 判 输 。 需 要 满足 条 件 : CO 没有 空格 子 ; © 横 方向 上 没有 相 邻 且 相 等 的 方块 ，@@ 
纵 方 向 上 没有 相 邻 且 相 等 的 方块 。 如 果 这 三 项 中 的 任何 一 项 不 满足 都 没 输 。 

(6) 判 赢 。 某 个 格子 的 值 达到 2048。 

(7) 分 数 。 在 任意 两 个 格子 合并 时 ， 分 数 增加 合并 之 后 方块 的 值 。 

(8) AÈ div 的 大 小 任意 设置 ， 方 块 中 的 数字 始终 垂直 居中 。 

(9) 核心 算法 是 判断 每 个 格子 移动 到 什么 位 置 ， 以 及 应 不 应 该 合并 。 

这 里 使 用 的 方法 是 ， 循 环 到 每 一 个 格子 。 然 后 再 将 这 个 格子 的 值 ， 依 次 去 跟 它 移动 方 
向 上 的 下 一 位 做 比较 。 如 果 下 一 位 是 空 ， 则 可 以 继续 跟 下 一 位 比较 ， 直 到 比较 到 下 一 位 不 
是 空 且 跟 当前 比较 值 相等 或 不 相等 或 遇 到 比较 的 边界 〈 之 前 有 合并 的 值 对 应 的 格子 或 移动 
方向 上 最 后 一 格 ) 为 止 。 判 断 是 移动 并 合并 还 是 只 移动 ， 最 终 的 移动 方位 值 。 

以 上 代码 在 代码 23-1 中 可 查找 到 。 


l. 尝试 改变 游戏 难度 ， 让 出 现 1024 时 即 判定 胜利 。 
2. 改变 游戏 界面 ， 将 游戏 方块 颜色 变 成 红色 。 


PK 2048 
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接 下 来 将 介绍 使 用 wordpress 搭建 一 个 属于 自己 的 个 人 网 站 。 
24.1 准 & 


(1) 进入 腾讯 云 官网 https://cloud.tencent.com。 腾 讯 云 官网 界面 如 图 24-1 所 示 。 


cloud.tencent.com * o 


开发 者 专属 在 线 实验 平台 


开发 者 实验 室 


立即 体验 





cn 域名 16 元 抢购 创业 扶持 


在 这 里 有 你 所 需 的 一 切 


图 24-1 腾讯 云 官网 界面 


(2) 直接 选择 建站 方案 。 腾 讯 云 建站 方案 界面 如 图 24-2 所 示 。 
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(3) 购买 之 后 可 以 看 到 服务 器 。 腾 讯 云 服务 器 界面 如 图 24-3 所 示 。 
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图 24-3 腾讯 云 服务 器 界面 
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24.22 WordPress 部 署 


24.2.1 服务 器 镜像 安装 


(1) 安装 Web 环境 (腾讯 去 有 已 经 集成 的 环境 镜像 可 以 选择 ， 这 里 选择 合适 的 镜像 即 
可 )。 腾讯 云 界面 、 腾讯 云 安 装 系统 界面 、 腾讯 云 镜像 选择 界面 如 图 24-4、 图 24-5、 图 24-6 
所 示 。 
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图 24-4 腾讯 云 界面 
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24-5 ”腾讯 云 安装 系统 界面 
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图 24-6 腾讯 云 镜像 选择 界面 


(2) 以 上 是 重 装 系统 ， 系 统 里 已 经 自 带 Web 环境 ， 这 里 选择 LAMP (Linux/Apache/ 
MySQL/PHP)。 确 认 安装 界面 如 图 24-7 所 示 。 
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图 24-7 确认 安装 界面 
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G) 登录 腾讯 云 界面 ， 如 图 24-8 所 示 。 
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图 24-8 ”登录 腾讯 云 界 面 


(4) 查看 镜像 提供 默认 信息 。 可 以 在 根 目录 下 查看 WordPress， 以 及 ftp 等 服务 的 默认 
密码 。 镜 像 默认 信息 界面 如 图 24-9 所 示 ， 输 入 cat default pass 即 可 。 





图 24-9 ”镜像 默认 信息 界面 


24.2.2 WordPress 初始 化 


(1) 通过 IP 地 址 进入 WordPress. WordPress 登录 界面 如 图 24-10 所 示 。 
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欢 凶 使 用 rordpress* 在 开始 前 ， 我 们 需要 您 数据 库 的 一 些 信息 。 请 准备 好 如 下 信息 - 


HRES 

数据 库 用 户 名 

数据 库 密码 

BREEN 

. RAAT (table prefiz， 特 别 旺 当 您 要 在 一 个 数据 库 中 安装 多 个 Wordpxezs 时 )》 


我 们 会 使 用 这 些 信息 未 创建 一 个 wp-config.php 文 件 。 如 果 自 动 创建 未 能 或 功 ， 不 用 担心 ,您 要 做 的 只 是 将 数 
据 库 信息 十 入 配置 文件 。 您 也 可 以 在 文本 编 竺 器 中 打开 wp-config-sample.php， 填 入 您 的 信息 ， 并 将 其 另存 
为 wp-config.php。 需要 更 多 帮助 ? 着 这 里 


绝 大 多 数 时 候 ， 您 的 网 站 服务 提供 商会 给 您 这 些 信息 。 如 果 您 没有 这 些 信息 ， 在 继续 之 前 您 将 需要 联系 他 们 。 如 果 
您 准备 好 了 … 


现在 号 开始 


图 24-10 WordPress 登录 界面 


(2) 填写 数据 库 ， 管 理 员 信息 。WordPress 信息 填写 界面 如 图 24-11 所 示 。 


I 


请 在 下 方 填写 您 的 数据库 连接 信息 。 如 果 您 不 确定 ， 请 联系 您 的 服务 提供 商 。 
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图 24-11 WordPress 信息 填写 界面 


24.3 个 人 网 站 使 用 


第 
理 员 登 录 。WordPress 管理 登录 界面 如 图 24-12 所 示 。 24 
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图 24-12 WordPress 管理 登录 界面 


使 用 WordPress 提供 的 admin 账号 可 以 对 网 站 进行 最 高 权限 的 修改 ， 例 如 增加 内 容 、 
修改 主题 。WordPress 管理 界面 如 图 24-13 所 示 。 
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图 24-13 


l. 根据 教程 建立 一 个 个 人 网 站 。 
2. 自 定义 个 人 网 站 里 的 内 容 ， 完 成 网 站 搭建 。 


本 部 分 小 结 


通过 这 一 部 分 学 习 ， 相 信 读 者 能 够 更 深切 地 感受 到 HTML、CSS、JavaScript 的 魅力 ， 
网 页 制作 技术 可 以 应 用 在 众多 场景 下 ， 完 成 许多 有 趣 的 任务 。 








后 记 





希望 读者 通过 阅读 此 书 能 够 对 HTML, CSS, JavaScript 有 一 个 基本 的 认识 ， 能 够 使 月 
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这 三 种 编程 工具 完成 常见 的 网 页 制作 和 开发 任务 .还 有 其 他 很 多 的 知识 在 本 书 中 并 未 提 及 ， 
方面 是 考虑 到 网 页 开发 技术 实则 千变万化 ， 不 能 一 一 列举 ， 另 一 方面 是 更 希望 读者 能 够 
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探索 ， 在 遇 到 问题 时 可 以 自主 探索 与 学 习 。 
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感谢 您 以 来 对 清华 版 图 书 的 支持 和 爱护 。 为 了 配合 本 书 的 使 用 ,本 书 
配套 的 资源 ,有 需求 的 读者 请 扫描 下 方 的 “ 书 圈 " 微 信 公 众 号 二 维 码 , 在 图 
区 下 载 , 也 可 以 拨打 电话 或 发 送 电 子 邮 件 咨询 。 
如 果 您 在 使 用 本 书 的 过 程 中 遇 到 了 什么 问题 ,或 者 有 相关 图 书 出 版 计划 ， 
您 发 邮件 告诉 我 们 ,以便 我 们 更 好 地 为 您 服务 。 







































































我 们 的 联系 方式 : 
地 Ht: 北京 海淀 区 双 清 路 学 研 大 厦 A 座 707 


资源 下 载 、 ut 


邮 编 : 100084 
电 话 : 010 一 62770175 一 4604 


资源 下 载 : http://www. tup. com. cn 








电子 邮件 : weijj@tup. tsinghua. edu. cn 
QQ: 883604( 请 写 明 您 的 单位 和 姓名 ) 


用 微 信 扫 一 扫 右 边 的 二 维 码 , 即 可 关注 清华 大 学 出 版 社 公 众 号 “ 书 圈 ”。 


